二、路由（vue-router）
1）安装
使用如下命令进行安装vue-router。
cnpm i vue-router -S
2）配置路由
// 文件路径src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/view/Home';
import Login from '@/view/Login';
import Register from '@/view/Register';
import Search from '@/view/Search';
// 使用VueRouter插件
Vue.use(VueRouter)
export default new VueRouter({
// 配置路由模式
mode: "hash",
// 配置路由规则
routes: [
{
path: "/home",
component: Home,
},
{
path: "/login",
component: Login,
},
{
path: "/register",
component: Register,
},
{
path: "/search",
component: Search,
},
{
path: "/",
redirect: "/home", // 重定向到/home
},
]
})
3）注册路由
// 文件路径src/main.js
import Vue from 'vue'
import App from './App.vue'
// 引入配置好的路由
import router from '@/router';
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 注册路由
router
}).$mount('#app')
4）使用路由
- 使用router-view标签，作为路由组件需要显示的内容占位。
<template> <div id="app"> <Header/> <router-view></router-view> <Footer/> </div> </template> - 路由跳转
- 声明式路由跳转（router-link）备注：需要注意使用此方式时，一定需要在router-link标签中
<p> <span>请</span> <router-link to="/login">登录</router-link> <router-link to="/register" class="register">免费注册</router-link> </p> - 函数式路由跳转（this.$router.push）
// 处理点击搜索 handleSearch() { this.$router.push('/search') }
- 声明式路由跳转（router-link）备注：需要注意使用此方式时，一定需要在router-link标签中
5）路由传参（编程式路由跳转传参）
- 传递参数
-
传递query参数
// 处理点击搜索 handleSearch() { // 传递query参数方式一，字符串传参 // this.$router.push("/search?keyword=" + this.keyword) // 传递query参数方式二，模板字符串传参 // this.$router.push(`/search?keyword=${this.keyword}`) // 传递query参数方式三，对象形式传参 this.$router.push({ path: 'search', query: { keyword: this.keyword } }) }使用$route.query.keyword接收。
<h1>params参数是：{{$route.params.keyword}}</h1> -
传递params参数
handleSearch() { // 传递params参数方式一，字符串传参 // this.$router.push("/search/" + this.keyword) // 传递params参数方式二，模板字符串传参 // this.$router.push(`/search/${this.keyword}`) // 传递params参数方式二，对象形式传参 this.$router.push({ name: 'search', params: { keyword: this.keyword } }) }{ /** * 采用对象形式传递params参数时,需要为路由添加name属性。 * 通过name属性进行传递，不可通过path进行传递。 */ name: "search", // 采用非对象形式传递params参数时，需要使用“/:keyword”进行占位， path: "/search/:keyword", component: Search, }使用$route.params.keyword进行接受
<h1>params参数是：{{$route.params.keyword}}</h1> -
关于params参数传递补充：
-
{ /** * 采用对象形式传递params参数时,需要为路由添加name属性。 * 通过name属性进行传递，不可通过path进行传递。 */ name: "search", // 采用非对象形式传递params参数时，需要使用“/:keyword”进行占位， path: "/search/:keyword?",// ? ==> 可是其keyword可传可不传 component: Search, meta: { footerIsShow: true } } -
this.$router.push({ name: 'search', params: { keyword: ""||undefined } }) -
{ /** * 采用对象形式传递params参数时,需要为路由添加name属性。 * 通过name属性进行传递，不可通过path进行传递。 */ name: "search", // 采用非对象形式传递params参数时，需要使用“/:keyword”进行占位， path: "/search/:keyword?",// ? ==> 可是其keyword可传可不传 // 借助props进行传递参数 // props: true, // 传递方式一、Boolean值的情况 // props: {keyword: "sdf"}, // 传递方式二、对象值的情况 props: ($router) => { return {keyword: $router.params.keyword} }, // 传递方式三、函数值的情况 component: Search, meta: { footerIsShow: true } },
-
6）路由元信息
- 可在路由配置中对其进行元信息（meta）选项的配置,如下所示：
routes: [ { path: "/home", component: Home, meta: { footerIsShow: true } }, { path: "/login", component: Login, meta: { footerIsShow: false } }, { path: "/register", component: Register, meta: { footerIsShow: false } }, { /** * 采用对象形式传递params参数时,需要为路由添加name属性。 * 通过name属性进行传递，不可通过path进行传递。 */ name: "search", // 采用非对象形式传递params参数时，需要使用“/:keyword”进行占位， path: "/search/:keyword", component: Search, meta: { footerIsShow: true } }, { path: "/", redirect: "/home", // 重定向到/home meta: { footerIsShow: true } }, ] - 通过$route.meta.footerIsShow进行获取其中的值：
<div id="app"> <Header/> <router-view></router-view> <Footer v-show="$route.meta.footerIsShow"/> </div>
7）路由补充
在使用编程式传参时，对同一个路由传递相同参数时，会发生 异常,解决办法，需要配置路由对其push||replace方法进行重写，其配置如下：
// 文件路径src/router/index.js
// 备份原有的push方法
const originPush = VueRouter.prototype.push
// 重写push方法
VueRouter.prototype.push = function (location, resolve, reject) {
resolve && reject
? originPush.call(this, location, resolve, reject)
: originPush.call(this, location, () => { }, () => { })
}
// 备份原有的replace方法
const originReplace = VueRouter.prototype.replace
// 重写push方法
VueRouter.prototype.replace = function (location, resolve, reject) {
resolve && reject
? originReplace.call(this, location, resolve, reject)
: originReplace.call(this, location, () => { }, () => { })
}
