本文主要讲解vue-router的详细说明，如果在企业项目中实际可以参考我的另外一篇文章，链接放在本文的7.注意点章节
1.router-link
<router-link>支持用户在具有路由功能的应用中(点击)导航,可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。
| 属性 | 类型 | 说明 |
|---|---|---|
| to | String/Object | 目标路由/目标位置的对象 |
| replace | Boolean | 不留下导航记录 |
| append | Boolean | 在当前路径后加路径 /a => /a/b |
| tag | String/Object | 指定渲染成何种标签 |
| active-class | String/Object | 激活时使用的Class |
<router-link :to="{ path: '/login'}" replace tag="span"></router-link>
2.router-view
<router-view>是一个功能性组件，用于渲染路径匹配到的视图组件，将显示与 url 对应的组件。
//方式一
<router-view></router-view>
//方式二 name是router设置里的name，会渲染对应的路由配置中 components下的相应组件
<router-view name="music"></router-view>
3.路由传参props
3.1使用布尔方式：
router配置文件，在路由后面写上参数，并设置props为true
{
path: '/music',
name: 'music',
component: () => import(/* webpackChunkName: "home" */ '@/pages/music/index.vue'),
props: true,
meta: {
title: '音乐',
current: '/music',
},
},
在页面A，设置跳转需要传递的参数params
//方式一
<router-link :to="{name:'music', params: {id: 'aaaaa'}}">跳转</router-link>
//方式二
toNext() {
this.$router.push({
name: 'music',
params: {
id: 'aaaaa'
}
})
}
在跳转过去的页面B，通过props或者this.$params取参
//方式一
props: {
id: {
type: String,
default: ''
}
}
//方式二
this.$params.id
3.2 Object模式
router配置文件
{
path: '/music',
name: 'music',
component: () => import(/* webpackChunkName: "home" */ '@/pages/music/index.vue'),
props: {
id: route.query.id, //使用query
age: route.params.name //使用params
},
meta: {
title: '音乐',
current: '/music',
},
},
在页面A，设置跳转
//方式一
<router-link :to="{name:'music',query: {id: 'aaaaa'}, params:{name:'音乐'}}" >跳转</router-link>
//方式二
toNext() {
this.$router.push({
name: 'music'
query: {
id: 'aaaaa'
},
params: {
name: '音乐'
}
})
}
在跳转过去的页面B，通过props或者this.$params取参
//方式一
props: {
id: {
type: String,
default: ''
},
name: {
type: String,
default: ''
}
}
//方式二
this.$route.query.id
this.$route.params.name
4.路由守卫
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航
| 参数 | 说明 |
|---|---|
| to | 即将要进入的目标路由对象 |
| from | 当前导航正要离开的路由 |
| next | 回调方法 |
例如：
router.beforeEach((to, from, next) => {
//如果没有登录则,跳转login,否则进行下一步
if (to.name !== 'Login' && !isAuthenticated) next({
name: 'Login' })
else next()
})
其中next有如下使用方法
| 方法 | 说明 |
|---|---|
| next() | 进行下一个钩子 |
| next(false) | 中断导航，URL如已改，则重置到from的地址 |
| next(‘/’) | 中断当前跳转并到其他地址，可设置路由对象 |
| next(error) | 导航终止并传递错误给onError() |
4.1全局解析守卫beforeResolve
router.beforeResolve是获取数据或执行任何其他操作，在 每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。
router.beforeResolve(async to => {
if (to.meta.requiresCamera) {
try {
await askForCameraPermission()
} catch (error) {
if (error instanceof NotAllowedError) {
// ... 处理错误，然后取消导航
return false
} else {
// 意料之外的错误，取消导航并把错误传给全局处理器
throw error
}
}
}
})
4.2全局后置钩子afterEach
后置守卫不会接受next函数也不会改变导航本身
router.afterEach((to, from) => {
// ...
})
4.3 路由独享守卫beforeEnter
可以在路由配置上直接定义专属的beforeEnter守卫，与全局前置守卫的方法参数是一样的。beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。
例如：从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时，才会被触发
const router = new VueRouter({
routes: [
{
path: '/music',
component: () => import(/* webpackChunkName: "home" */ '@/pages/music/index.vue'),
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
4.4 组件内的守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
const UserDetails = {
template: `...`,
beforeRouteEnter(to, from) {
// 在渲染该组件的对应路由被验证前调用
// 不能获取组件实例 `this` ！
// 因为当守卫执行时，组件实例还没被创建！
},
beforeRouteUpdate(to, from) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
},
beforeRouteLeave(to, from) {
// 在导航离开渲染该组件的对应路由时调用
// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
},
}
5.完整的导航解析流程
1.导航被触发。
2.在失活的组件里调用 beforeRouteLeave 守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter。
8.调用全局的 beforeResolve 守卫(2.5+)。
9.导航被确认。
10.调用全局的 afterEach 钩子。
11.触发 DOM 更新。
12.调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
6.路由元信息
如果希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等,可以使用meta属性，代码如下
{
path: '/home',
name: 'home',
component: () => import(/* webpackChunkName: "home" */ '@/pages/home/home.vue'),
meta: {
title: '首页',
current: '/home',
},
},
//方法一，在vue页面获取
this.$route.meta.title
//方法二 在导航守卫获取
router.beforeEach((to, from) => {
console.log(to.meta.title)
})
7.注意点
1.router-vue官网地址：https://router.vuejs.org/zh/guide/
2.router有两种mode方式，分别为history和hash,默认是hash,可以参考我的搭建项目文档：【vue create】二.配置Esline、less、nprogress、ant-design-vue、环境变量env、axios、vuex、Router、路由守卫以及登录页