6.vue中的路由
6.vue中的路由
6.1 相关概念
6.1.1 vue-router 相关概念
vue中的一个插件库，专门用来实现SPA应用。
6.1.2 SPA应用相关概念
（1）单页Web应用（single page web application 既：SPA）。
（2）整个应用只有一个完整的页面。
（3）点击页面中的导航链接，不会刷新页面，只会做局部更新。
（4）通过ajax获取数据。
6.1.3 路由的相关概念
（1）路由的概念：
（1.1）一个路由就是一组映射关系（key-value）。
（1.2）key为路径，value是function或者component。
（2）路由分类：
（2.1）后端路由：
（2.1.1）概念：value是function，用于处理客户端提交的请求。
（2.1.2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来
处理请求，返回响应数据。
（2.2）前端路由：
（2.2.1）概念：value是一个component，用于展示页面内容。
（2.1.2）工作过程：当浏览器路径发生改变时，就会展示对应的组件。
6.2 路由的基本使用
（1）安装vue-router：命令:npm i vue-router（如果是vue2则使用npm i vue-router@3）。
（2）应用插件：Vue.use(VueRouter)。
（3）编写router配置项：创建router/index.js。
//该文件用于创建整个应用的路由器 import VueRouter from 'vue-router' import Class from "../compnents/Class.vue"; import Subject from "../compnents/Subject.vue"; //创建并暴露一个路由 export default new VueRouter({ routes:[ { path:'/class', component:Class },{ path:'/subject', component:Subject } ] })（4）实现切换：active-class表示点击后触发的样式，to表示跳转的路由连接。
（5）指定点击导航后展示的内容位置：
6.3 注意事项
（1）通过路由配置实现展示的组件（既通过
实现展示的组件）称之为路由组件，通过编写标签实现展示的，称之为一般组件，一般组件通常存放在components文件夹，路由组件一般存放在pages文件夹。 （2）通过切换实现展示后，不展示的路由组件默认是被销毁的，当切换路由展示路由组件时，会再去重新挂载。
（3）每个组件都有自己的$route属性，里面存储当前组件的路由信息（每个组件$route属性不相同）。
（4）整个组件只有一个router，可以通过$router属性获取到（每个组件$router属性相同）。
6.4 嵌套（多级）路由
（1）配置路由规则时使用children配置项：
//该文件用于创建整个应用的路由器 import VueRouter from 'vue-router' import Class from "../pages/Classes"; import Subject from "../pages/Subject"; import OneClass from '../pages/OneClass' import TwoClass from '../pages/TwoClass' //创建并暴露一个路由 export default new VueRouter({ routes: [ { path: '/class', component: Class, children: [ { path: 'oneClass', component: OneClass, }, { path: 'twoClass', component: TwoClass, }, ] }, { path: '/subject', component: Subject } ] }) （2）使用时要写完整路径：
一班 二班 （3）注意：二级路由配置时不要写"/"，但是访问时路径要写全路径（加上父路径）。
6.5 query参数
（1）传递参数：
（1.1）直接拼接：
{{item.name}} （1.2）对象写法：
{{item.name}} （2）接收参数：
名称：{{$route.query.name}}
内容：{{$route.query.content}}
6.6 命名路由
（1）作用：简化路由的跳转。
（2）使用：
（2.1）给路由命名：
//该文件用于创建整个应用的路由器 import VueRouter from 'vue-router' import Classes from "../pages/Classes"; import Subject from "../pages/Subject"; import Class from '../pages/Class' //创建并暴露一个路由 export default new VueRouter({ routes: [ { name:'班级', path: '/classes', component: Classes, children: [ { name:'班内信息', path: 'class', component: Class, }, { path: 'subject', component: Subject } ] } ] })（2.2）使用：
{{item.name}} {{item.name}} 若是路径过于繁琐，可以不使用路径，转而使用name属性。
6.7 params参数
（1）配置路由，声明接收params的参数（path中使用占位符）：
//该文件用于创建整个应用的路由器 import VueRouter from 'vue-router' import Classes from "../pages/Classes"; import Subject from "../pages/Subject"; import Class from '../pages/Class' //创建并暴露一个路由 export default new VueRouter({ routes: [ { name:'班级', path: '/classes', component: Classes, children: [ { name:'班内信息', path: 'class/:name/:content', component: Class, }, { path: 'subject', component: Subject } ] } ] })（2）传递参数：
{{item.name}} {{ item.name }} 注意：如果用对象写法一定要用name属性跳转，而不是path属性。
（3）接收参数：
名称：{{$route.params.name}}
内容：{{$route.params.content}}
6.8 props配置
（1）作用：让路由组件更加方便的接受到参数：
{ name: '班内信息', path: 'class/:name/:content', component: Class, // 第一种写法 值为对象 局限性比较大一般不用 /*props:{ name:"name", content:"content" } */ // 第二种写法 值为Boolean 如果值为true，则将所有收到的param参数以props的形式传递给该组件，query接收不到 // props:true // 第三种写法 值为函数 props($route){ return{ name:$route.query.name, content:$route.query.content } } }
6.9 route-link的replace
（1）作用：控制路由跳转时操作浏览器历史记录的模式。
（2）浏览器历史记录写入模式有两种，push和replace，push是追加历史记录，replace是替换当前记录，默认是push。
（3）
或 开启replace模式。
6.10 编程式路由导航
（1）作用：不借助
实现跳转，让路由跳转更加灵活。 （2）编码：
pushShow(item){ this.$router.push({ name: '班内信息', query: { name: item.name, content: item.content, }, }) }, replaceShow(item){ this.$router.replace({ name: '班内信息', query: { name: item.name, content: item.content, }, }) }, //返回 back() { this.$router.back(); }, //前进 forward() { this.$router.forward(); }, //前进或后退指定步数 testGo() { this.$router.go(-1); },
6.11 路由缓存
（1）作用：让不展示的路由组件保持挂载，不被销毁。
（2）具体编码：
（3）注意：include如果不写则默认全部，内容为组件的name属性，并非router内配置的name属性。缓存多个写法为：
6.12 新生命周期钩子
（1）作用：路由组件所独有的生命周期钩子，用于捕获组件是否处于激活状态
（2）使用：
activated() { console.log("Class被激活") this.timeId= setInterval(() => { this.opacity -= 0.01; if (this.opacity < 0) { this.opacity = 1; } },15); }, deactivated() { console.log("Class失活") clearInterval(this.timeId) },（3）补充：$nextTick也属于生命舟曲钩子，当更新数据的dom更新完毕再执行$nextTick内的代码。
6.13 路由守卫
（1）作用：对路由进行权限控制。
（2）分类：全局守卫，独享守卫，组件内守卫。
（3）全局守卫：
//全局前置路由守卫，每次初始化之前或者路由切换之前， router.beforeEach((to, from, next) => { console.log("前置路由守卫",from,to) let user = localStorage.getItem("user") if (to.meta.isAuth) { if (user == 'user') { next() }else{ alert(user+'无权查看') } }else{ next() } }) //全局前置路由守卫，每次初始化之前或者路由切换之后， router.afterEach((to, from) => { console.log("后置路由守卫",from,to) document.title=to.name })（4）独享守卫：
独属于某一个路由的路由守卫，且没有afterEnter路由守卫。
{ name: '班内信息', path: 'class/:name/:content', meta:{ isAuth:true }, component: Class, beforeEnter:(to, from, next) => { console.log("前置路由守卫",from,to) let user = localStorage.getItem("user") if (to.meta.isAuth) { if (user == 'user') { next() }else{ alert(user+'无权查看') } }else{ next() } } }（5）组件内路由守卫：
通过路由规则，访问或离开该组件时，会调用。（直接使用标签访问组件不会调用）
//通过路由规则进入该组件时调用 beforeRouteEnter(to, from, next){ next() }, //通过路由规则离开该组件时调用 beforeRouteLeave (to, from, next) { next() }
6.14 路由的hash和history
（1）对于一个url来说，#及其后面的内容就是hash值。
（2）hash值不会包含在http请求中。（既不会发送给服务器）
（3）hash模式：
（3.1）地址中永远带有#，不美观。
（3.2）若以后通过第三方手机app分享，若app校验较为严格，则会被认定为不合法。
（3.3）兼容性好。
（4）history模式：
（4.1）地址干净，美观。
（4.2）兼容性比起hash模式略差。
（4.3）应用部署上线时，需要后端人员支持，解决刷新页面在服务器404的问题。