Vue-Router路由
这篇总结主要介绍Vue-Router
1.路由概念
路径(hash值) 与 页面 一一对应关系
原理： 监听网页hash值
2.路由作用/场景 ：
单页面应用： SPA（singal page application）
（1）加载快：局部刷新
（2）数据传输方便
3.路由配置
自动生成路由配置：vue add router
0.导入vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter)
1.导入 页面组件
import 组件名 from '组件路径'
2.配置 路由规则(地址和页面一一对应)
const routes = [
{ path: '/路径' , component : 组件名 }
]
3.创建 路由对象
4.挂载 App根组件
5.路由 出口
6.路由 导航4.路由模式
hash模式：路径有#号， 不会给服务器发请求
history模式: 路径没有#号， 会给服务器发请求。需要服务器单独配置
5.重定向
把 路径a 变成 路径b
在配置路由规则中，{path:' / ',redirect:'/路径'}
重定向只是修改路径，不会路由匹配
6.路由导航(跳转)传参（A页面->B页面）
声明式导航(a标签)
query参数
A页面传 ： url?参数名=参数值
B页面收: $route.query.参数名
params参数
路由规则中配置：参数名
{ path:'/路径/:参数名1/:参数名2' , component:组件名} A页面传 ： url/参数值
B页面收: $router.params.参数名
编程式导航(push方法)
query参数
特点： (1)参数会在地址栏显示 (2)页面刷新之后还在
A页面传
this.$router.push({
path:'/路径',
query:{ 参数名:参数值 }
})B页面收: $route.query.参数名
params参数
特点：需要在路由文件中配置路由名(内存传参，刷新就会消失)
{ path:'/路径名', name:'路由名' , component:组件名 }A页面传 ：
this.$router.push({
name:'路由名',
params:{ 参数名:参数值 }
})B页面收: $route.params.参数名
7.二级路由
1.在router/index.js中配置二级路由规则
{ path:'/路径', component:组件, children : [
// 二级路由配置
] }2.给页面添加二级路由出口
<router-view></router-view>8.路由导航守卫
全局前置路由守卫
beforeEach
何时被调用？
1.初始化时被调用
2.每次路由被切换之前被调用
语法：
router.beforeEach((to,from,next)=>{
执行代码
next() //同意放行 不写这个调用则是不放行
})
//to：去哪里？ meta，程序员自定义配置的属性
//from:从哪来？
//next:是否放行全局后置路由守卫
afterEach
何时被调用？
1.初始化时被调用
2.每次路由被切换之后被调用
语法：
router.afterEach((to,from)=>{
执行代码
})
//to：去哪里？ meta，程序员自定义配置的属性
//from:从哪来？
//next:是否放行独享路由守卫(写在路由配置信息中，与path,component,meta同级)
beforeEnter
语法：
beforeEnter((to,from,next)=>{
执行代码
})只有前置，没有后置由于他没有后置路由守卫，那么它可以配合全局的后置路由守卫一起使用
组件内路由守卫
顾名思义：是写在组件之中的beforeRouteEnter
通过路由规则，进入该组件时被调用
beforeRouteEnter((to,from,next)=>{
执行代码
})beforeRouteLeave
通过路由规则，离开该组件时被调用
beforeRouteLeave((to,from,next)=>{
执行代码
})路由导航守卫作用：
示例1： 有的页面需要登录才能进入， 有的页面不需要。 可以通过导航守卫进行拦截，如果是需要登录权限的。就可以判断用户是否登录。 如果登录了，就正常跳转。 没登录，就主动跳转到登录页。
示例2：有的会员页面，需要开通会员才能进入。 可以通过导航守卫进行拦截，当用户想要跳转会员页面的时候，可以判断用户是否已经是会员。 如果是，就正常跳转。 如果不是，就跳转到开通会员页面
混淆单词
routes 路由规则 数组
router 路由实例对象
$route 路由信息（获取参数）
$router 路由实例对象( 页面跳转)
