路由
- 一个路由就是一组映射关系（key-value）key为路径。在前端路由中，value是component，用于改变页面展示内容，当浏览器路径改变时对应组件就会显示；在后端路由中value是function，用于处理客户端请求。
Vue-Router
vue的一个专门用来实现SPA应用的插件库。
单页面web应用SPA single page web application
整个应用只有一个完整页面
点击页面中的导航链不会刷新页面，只会做页面的局部更新
数据需要通过Ajax请求获取
路由实现
路由局部组件一般放在page文件夹中，配置的路由一般放置在routers文件夹中
通过切换隐藏路由组件，默认是销毁，需要是时候再进行挂载
每个组件都有自己的$route属性，来存放自己的路由信息
整个组件只有一个router，可以通过组件的$router属性获取到
$router是用来操作路由，$route是用来获取路由信息
$router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history）
$route是一个跳转的路由对象（路由信息对象），每一个路由都会有一个$route对象，是一个局部的对象。
- 安装vue-router
vue2如果安装路由插件要用npm install vue-router@3如果backage.json文件中有vue-router依赖说明安装成功。
backage.json文件vue-router依赖
-编写router配置项
vue-router报错文件名后容易抽风，重新启动一下本地服务器就好了
import VueRouter from 'vue-router'//引入vuerouter
import 路由组件 from '地址'
//创建router实例，管理路由规则
const router =new VueRouter({
routers:[
{
path:'组件地址'，
component:组件声名
}，
{
path:'组件地址'，
component:组件声名
}
]
})
//暴露router
export default router
- 声明式路由导航：实现路由切换用
router-link标签，to属性为目标地址 - 指定展示位，router-view标签
children 多级路由
routers:[
{
path:'组件地址'，
component:组件声名，
}，
{
path:'组件地址',
component:组件地址,
children:[
{
path:'二级组件地址',//此处写地址不要带斜杠
component:二级组件声名,
},
]
}
]
跳转，要写完整路径
<ronuter-link to='/一级路由组件/二级路由组件'><router-link/>
query参数
传递参数
<router-link
:to="{
path:'路由组件地址'，
query:{
id:m.id,
title:m.title
}
}"
>
<router-link/>
接收参数，query参数可以不再路由中配置直接调用
$route.query.id
$route.query.tilte
命名路由
命名路由可以简化路由跳转，在路由规则中配置name属性给路由命名。
简化后，在router-link标签的to属性中使用对象写法直接赋值{name:'路由名'}。
Params参数
在routers实例中，配置路由规则，声明接受params参数。
{
path:'地址',
component:组件声明,
children:[
mame:'路由命名',
path:'地址/:属性名/:属性名？'//使用占位符声明接受params参数，在值后加上问号，可以保证不传值的情况下，URL不会出现问题
component:组件声明
]
}
- 参数传递
路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置项
<router-link
:to='{
name:'路由名',
params:{
属性名:属性值,
}
}'
>
</router-link>
- 接受参数
$route.params.属性名
路由传参两种方法，query和params配置项区别
query使用path传参，params使用name传参。
路由传参三种写法：
字符串 模板字符串 对象
路由props配置
props值为函数，接受params属性，该函数return返回的对象中没一组key-value都会通过props传给该路由组件
前端路由ky键值对应：key,URL，地址栏中的路径；value，相应的路由组件。
路由跳转 replace方法
replace控制路由跳转时操作浏览器历史纪录和模式
浏览器的历史纪录有两种写入方法：push和replace
push是追加历史纪录；replace是替换当前记录，路由跳转时默认为push方法。
<router-link :replace='true'></router-link>简写<router-link replace></router-link>
浏览记录本质是一个栈，默认为push，点开新页面就会在栈顶追加一个地址，后退，栈顶指针向下移动，改为replace就是不追加，将栈顶地址替换。
编程式路由导航
路由跳转两种方式：
声明式导航，利用router-link标签to属性实现路由跳转
编程式导航，利用$router.push||replece方法实现路由跳转
不借助router-link标签实现路由跳转，让路由更加灵活
在输入类标签中绑定一个路由跳转事件，在methods实例中声明该事件，在路由跳转函数中配置路由地址和传递参数
this.$router.push({})//和to属性相同
this.$router.replace({})
this.$router.forward()//前进
this.$router.back()//后退
this.$router.go(n)//n为正数前进，n为负数后退
编程式导航跳转到当前路由，参数不变，多次执行会抛出Navigation Duplicated的错误警告。
原因：push方法是一个promise，promise需要传递成功和失败两个参数，声明式导航在底层已经写好。
方法：push是VueRouter.Prototype的一个方法，在router中的index中重写即可。
//1、先把VueRouter原型对象的push，保存一份
let originPush = VueRouter.prototype.push;
//2、重写push|replace
//第一个参数：告诉原来的push，跳转的目标位置和传递了哪些参数
VueRouter.prototype.push = function (location,resolve,reject){
if(resolve && reject){//判断是否带有传递状态的参数
originPush.call(this,location,resolve,reject)
}else{
originPush.call(this,location,() => {},() => {})//后面两项分别代表执行成功和失败的回调函数
}
}
路由守卫
对路由进行权限控制
全局路由守卫声明在index文件中；独享路由守卫声明在router实例路由规则中；组件内路由声明在路由组件中
router.beforeEach((to,from,next)=>{
if(to.meta.isAuth)//判读当前路由是否需要权限控制
if(){next（）//放行}//权限控制具体规则
else{console.log('无权限')}
nex()//不需要路由规则放行
})
