一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情
路由传参
在跳转路由时, 可以给路由对应的组件内传值
#在router-link上的to属性传值, 语法格式如下
<router-link> to="/home?参数名=值">首页</router-link> //URL?a=1&b=2
<router-link> to="/home/值">首页</router-link> // URL/:id (需在路由规则里配置/path/:参数名)
#对应页面组件接收传递过来的值
$route.query.参数名 接收字符串格式的参数（查询参数）
$route.params.参数名 接收动态路由格式的参数（路由参数）
重定向
用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面
#在路由规则最前面添加，页面一打开就显示重定向的组件
//其中path表示 需要被重定向指定的原地址，redirect表示将要被重定向的新地址
{path:'/',redirect:'/home'} //网页打开url默认hash值是/路径（页面一打开就访问home）
路由模式切换
修改路由在地址栏的模式
#hash路由例如: http://localhost:8080/#/home
const router=new VueRouter({
routes,
mode:'hash'
})
#history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)
const router=new VueRouter({
routes,
mode:'history'
})
访问路径不存在
找不到路径给个提示页面
#路由规则最后, path匹配*(任意路径) – 前面不匹配就命中最后这个
//先导入显示页面不存在的组件
improt NotFound from "@/views/NotFound"
//在数组规则最后一个里定义这个规则
{path:'*',component:NotFound},
在数组最后一个位置, 插入匹配*的规则, 展示404页面
嵌套路由
通过路由实现组件的嵌套展示，叫做嵌套路由
通过children属性声明子路由规则，子路由规则里
routers:[
{//父级路由规则
path:'/about',
component:about,
children:[ //通过children 属性嵌套子级路由规则
{path:'tab1',component:Tab1},//访问/about/tab1时，展示Tab1组件
{path:'tab2',component:Tab2},//访问/about/tab2时，展示Tab2组件
]
}
]
# 在子路由path里不要/开头，不加/会自动和about连接，/表示目录
动态路由匹配
一个路由规则能够匹配到多个路由的链接
动态路由：把hash地址中可变的部分定义为参数，从而提高路由规则的复用性
在vue-router中使用：来定义路由的参数项
//路由中的动态参数以：进行声明，冒号后面的是动态参数的名称
{path:'/movie/:id',component:Movie}
//将以下3个路由规则，合并成了一个，提高了路由规则的复用性
{path:'/move/1',component:Movie}
{path:'/move/2',component:Movie}
{path:'/move/3',component:Movie}
导航守卫
导航守卫用来控制路由的访问权限
#声明导航守卫：全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制
1、调用路由实例对象的beforeEach函数，声明全局前置守卫
2、fn必须是一个函数，每次拦截到路由请求，都会调用fn进行处理
3、因此fn叫做守卫方法
router.beforeEach(fn)//路由跳转之前执行这个函数，来决定要不要跳转
守卫方法的三个形参
router.beforeEach((to,from,next)=>{
//to目标路由对象
//from 当前导航正要离开的路由对象
//next 是一个函数，表示放行
})
在守卫方法中如果不声明next形参，则默认允许访问每一个路由
在守卫方法中如果声明了next形参，则必须调用next()函数，否则不允许用户访问任何一个路由
next三种调用方式
直接放行：next()
强制其停留在当前页面：next（false）
强制其跳转到登录页面：next（'/login'）
