一、相关理解
1.路由就是一组key-value的对应关系
多个路由，需要经过路由器的管理
一个路由就是一组映射关系（key-value）
key为路径，value可能是function或component
路由分类:
后端路由：
理解：value是function，用于处理客服端提交的请求
工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，
返回响应数据
前端路由：
理解：value是component，用于展示页面内容
工作过程：当浏览器的路径改变时，对应的组件就会显示
2.vue-router的理解：vue的一个插件库，专门用来实现SPA应用
3.对SPA应用的理解：
单页面Web应用
整个页面只有一个完整的页面
点击页面中的导航链接不会刷新页面，只会做页面的局部更新
数据需要通过ajax请求获取
二、基本使用
1.安装 vue-router 命令： npm i vue-router
2.应用插件：Vue.use(VueRouter)
3.编写router配置项：
// 该文件专门用于创建整个应用的路由器
importVueRouterfrom"vue-router";
importAboutfrom'../components/About.vue'
importHomefrom'../components/Home.vue'
// 创建一个路由器
constrouter=newVueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露
exportdefaultrouter
4.实现切换（active-class可配置亮高样式）
About
5.指定展示位置
三、几个注意点
1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
2.通过切换，"隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3.每个组件都有自己的$route属性，里面存储着自己的路由信息
4.整个应用只有一个$router，可以通过组件的$router属性获取到
四、多级（嵌套）路由
1.配置路由规则。使用children配置项：
// 创建并暴露一个路由器
export default new VueRouter({
routes:[
// 一级路由
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
// 二级路由
children:[ //通过children配置子级路由
{
path:'news', //不要写 /news
component:News
},
{
path:'message',
component:Message
}
]
},
]
})
2.路由跳转（要写完整路径）：
五、路由的query参数
1.传递参数
:to="{ path:'/home/message/details', query:{ id:m.id, title:m.title } }"> {{m.title}} 2.接收参数： $route.query.id $route.query.title 1.作用：可以简化路由的跳转 2.如何使用： (1).给路由命名： { path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:'welcome', component:Welcome, } ] } ] } (2).简化跳转： 跳转前 需要写完整的路径 跳转 直接通过名字跳转 简化写法配合传参数 :to="{ name:'hello', query:{ id:m.id, title:m.title } }"> 跳转 1.配置路由，声明接收params参数 export default new VueRouter({ routes:[ // 一级路由 { path:'/about', component:About }, { path:'/home', component:Home, // 二级路由 children:[ //通过children配置子级路由 { path:'news', //不要写 /news component:News }, { path:'message', component:Message, children:[ { name:'xiangqing', path:'details/:id/:title', //params传参时 此处必须加 使用占位符声明接收params参数 component:Details, } ] } ] }, ] }) 2.传递参数 注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置 3.接收参数 $route.params.id $route.params.title 作用：让路由组件更方向的收到参数 1.props的第一种写法，值为对象,该对象中的所有key-value都会以props的形式传给Details组件 props:{a:1,b:'你好啊'} 2.props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件接收到的所有params参数，以props的形式传给Details组件 props:true 3.props的第三种写法，值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件 props($route){ return {id:$route.query.id,title:$route.query.title} } 或 props({query}){ return {id:query.id,title:query.title} } 或 props({query:{id,title}}){ return {id,title} } 1.作用：控制路由的跳转时操作浏览器历史记录的模式 2.浏览器的历史记录有两种写入方式：分比为push和replace，push是追加历史记录，replace是替换当前记录。 路由跳转的时候默认为push 3.如何开启replace模式： 1.作用：不借助< router-link>实现路由跳转，让路由跳转更加灵活 2.具体编码： methods: { pushShow(m){ this.$router.push({ name:'xiangqing', query:{ id:m.id, title:m.title } }) }, replaceShow(m){ this.$router.replace({ name:'xiangqing', query:{ id:m.id, title:m.title } }) } }, return this.$router.back() //前进 return this.$router.forward() //后退 return this.$router.go(n) //传入的参数是正数 连续向前走三步 传入的参数是负数 连续向后退三步 1，作用：让不展示的路由租金保持挂载，不被销毁 2.具体编码： 注意：需要展示的内容在哪个组件里面 就在哪写 (1).如果缓存所有的路由组件 include不写 (2). 缓存多个路由组件 (3).缓存一个路由组件 1.作用：路由组件所独有的两个钩子，用于捕获路由组件的救火状态 2.具体名字： activated 路由组件被激活时触发 deactivated 路由组件失活时触发 1.作用：对路由进行权限控制 2.分类：全局守卫、独享守卫、组件内守卫 3.全局守卫 // 全局前置路由守卫 // 每次路由切换之前被调用、初始化时被调用 router.beforeEach((to,from,next)=>{ if(to.meta.isAuth){ //判断是否需要进行权限控制 if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则 next() //放行 }else{ alert('学校名不对，无权限查看！') } }else{ next() } }) // 全局后置路由守卫 // 每次路由切换之后被调用、初始化时被调用 router.afterEach((to,from)=>{ if(to.meta.title){ document.title = to.meta.title }else{ document.title = 'myvue' } }) 4.独享守卫:(谁需要插到谁的路由中) // 独享路由守卫 beforeEnter:(to,from,next) =>{ if(to.meta.isAuth){ //判断是否需要鉴权 if(localStorage.getItem('school') === 'atguigu'){ next() }else{ alert('学校名不对，无权限查看！') } }else{ next() } } 5.组件内路由守卫 //进入守卫 通过路由规则，进入该组件时被调用 beforeRouteEnter (to, from, next) { console.log('组件内路由守卫'); if(to.meta.isAuth){ //判断是否需要鉴权 if(localStorage.getItem('school') === 'atguigu'){ next() }else{ alert('学校名不对，无权限查看！') } }else{ next() } }, //离开守卫 通过路由规则，离开该组件时被调用 beforeRouteLeave (to, from, next) { next() } mode默认是hash mode:'history', 更改工作模式 1.对于一个url来说，hash值是：#及其后面的内容就是hash值 2.hash值不会包含在HTTP请求中，即：hash值不会带给服务器 3.hash模式： (1).地址中永远带着#号，不美观 (2).若以后通过第三方手机app分享，若app校验严格，则地址会被标记为不合法 (3).兼容性较好 4.history模式 (1).地址干净，美观 (2).兼容性和hash模式相比略差 (3).应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题 六、命名路由
七、路由的params参数
八、路由的props配置
九、< route-link>的replace属性
十、编程式路由导航
十一、缓存路由组件
十二、两个新的生命周期钩子
十三、路由守卫
十四、路由器的两种工作模式