本文主要讲解vue-router的详细说明，如果在企业项目中实际可以参考我的另外一篇文章，链接放在本文的7.注意点章节

1.router-link

支持用户在具有路由功能的应用中(点击)导航,可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

2.router-view

是一个功能性组件，用于渲染路径匹配到的视图组件，将显示与 url 对应的组件。

//方式一

//方式二 name是router设置里的name，会渲染对应的路由配置中 components下的相应组件

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

//方式一
跳转
//方式二
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,  //使用queryage: route.params.name  //使用params},meta: {title: '音乐',current: '/music',},},

在页面A，设置跳转

//方式一
跳转
//方式二
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 提供的导航守卫主要用来通过跳转或取消的方式守卫导航

例如：

router.beforeEach((to, from, next) => {
//如果没有登录则,跳转login,否则进行下一步if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })else next()
})

其中next有如下使用方法

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、路由守卫以及登录页