一、导航守卫
1、全局前置守卫 router.befoeEach(to,form,net)
每次发生路由的导航跳转时,都会触发全局前置守卫。因此,在全局前置守卫中,程序员可以对每个路由进行访问权限的控制
注:to 是将要访问的路由的信息对象
from 是将要离开的路由的信息对象
next 是一个函数,调用next() 表示放行,予许这次路由导航
//全局路由守卫
//可控制页面访问权限--登录
router.beforeEach((to,form,net)=>{
// to 是将要访问的路由的信息对象
// from 是将要离开的路由的信息对象
// next 是一个函数,调用next() 表示放行,予许这次路由导航
})
2、全局后置钩子
router.afterEach(function (to, from) {
//每次发生路由的跳转之后,都会触发全局后置钩子,用的比较少
//可以用于修改title
})
注意:全局后置钩子是没有第三个参数中的 next 的
3、路由独享守卫
独有的路由守卫,与全局前置路由守卫没啥区别,只是作用的范围不同罢了,详细见代码:
...
{
path: 'user',
component: login,
meta: { isAuth: true, title: '用户信息' },
beforeEnter: (to, from, next)=>{
// ...
}
}
...
注意:独享路由守卫是没有后置路由守卫的
4. 组件内路由守卫
组件内路由守卫,写在组件内部的
export default {
name: 'MyComponents',
// 通过路由规则,进入该组件时被调用
beforeRouteEnter(to, from, next){
// ...
},
// 通过路由规则,离开该组件时被调用
beforeRouteLeave(to, from, next){
// ...
}
}
注意:是没有前置后置可分的,因为beforeRouteLeave是离开该组件时才会被调用,并不是跳转之后就调用的
二、路由有两种工作模式
路由有两种工作模式,分别是:hash 和 history
默认开启的就是 hash 的工作模式
# 就是代表 hash ,后面就是 hash 值
注意:# 后面的值都是不发给服务器的
开启 history 模式要添加一个 mode配置项 ,默认是 hash
三、vue-router 的常见用法
1. 路由重定向
2. 嵌套路由
3. 动态路由匹配
四、声明式导航 & 编程式导航
vue 项目中点击 <router-link> 都属于声明式导航
调用 API 方法实现导航的方式,叫做编程式导航
4.1、vue-router 中的编程式导航 API
this.$router.push(‘hash 地址’) 跳转到指定 hash 地址,并增加一条历史记录
this.$router.replace(‘hash 地址’) 跳转到指定的 hash 地址,并替换掉当前的历史记录
this.$router.go(数值 n) 实现导航历史前进、后退
this.$router.back() 在历史记录中,后退到上一个页面
this.$router.forward() 在历史记录中,前进到下一个页面
this.$route.query 对象访问到动态匹配的参数值
this.$route.params 对象访问到动态匹配的参数值
注:push 会增加一条历史记录、replace 不会增加历史记录,而是替换掉当前的历史记录
使用 props 接收路由参数
this.$router.push({
path: '/checkout',
query:{
productId:id,
}
})
//在url中形式(url中带参数)
http://xxx/#/goodsDetails?productId=150642571432849
this.$route.query.productId
// An highlighted block
this.$router.push({
name: 'checkout',
params:{
productId:id,
}
});
在url中形式(url中不带参数)
http://172.19.186.224:8080/#/checkout
this.$route.params.productId
为了简化路由参数的获取形式,vue-router 允许在路由规则中开启 props 传参。示例代码如下:
{path:'/vovie/:id',component:indexedDB,path:true}
<template>
<div>组件{{id}}</div>
</template>
<script>
export default{
props: ['id'] //使用Props 接收路由规则中匹配参数到的参数项
}
</script>
五、this,$router与this.$route区别
this.$router:全局的路由对象,包含和很多属性和对象,任何页面都可以调用其方法。
this.$route:当前路由对象,是一个局部的路由对象,每一个路由都有一个route对象,可以使用其属性。