进阶知识
首先是对之前的项目进行了一些修改,源码可在git中找到,增加了登陆页面
https://gitee.com/zhengwanting/studyVue2
导航守卫写在了permission.js中
一、导航守卫
1.全局前置守卫
router.beforeEach((to,from,next)=>{}):是在路由跳转之前,根据状态进行一些操作。
有三个参数分别是to,from,next。
to:即将进入的目标路由
from: 即将离开的路由
next(可选):路由控制参数
例:在路由跳转的时候,判断是否带有token(在登陆成功时,获取到的信息,用来判断用户身份的信息),若没有就返回登录页,若有就直接跳转。
这是一个较为简单的应用实际操作会添加更多判断条件。
也可以返回false,这样就会返回from的路由路径
import router from "./router/router";
router.beforeEach((to,from,next)=>{
// console.log(to) 即将进入的路由
// console.log(from) 即将离开的路由
if(localStorage.getItem('loginToken')){
next()
}else{
// 因为没有检查到token值返回至登录页
next({path: '/login'})
}
})
2.全局解析守卫
router.beforeResolve确保在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被正确调用。
router.beforeResolve 是获取数据或执行任何其他操作(如果用户无法进入页面时你希望避免执行的操作)的理想位置。
其实这里暂时没有很理解。之前也没有遇到过。
3.全局后置钩子
router.afterEach 与前置守卫不同的是,他没有next函数,也不会改变导航本身
它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。
router.afterEach((to,from)=>{
console.log(to)
console.log(from)
// 判断是否在router.js文件中访问的路由是否配置了name这个属性
// 如果name属性存在就设置为浏览器标题名称
// 不存在就设置为自定义值
if(to.name) {
document.title = to.name;
}else{
document.title = "xxx系统"
}
})
4.路由独享守卫
beforeEnter,这个是在路由配置的时候添加的,通过名称理解就是这个路由,单独享有的守卫。
只有在进入路由的时候触发,不会在参数改变时触发。只有是不同的路由进入到这个路由的时候才会触发。
例如在page1页面中增加一个切换参数但是跳转page1的router-link
view1/index.vue文件
<template>
<div class="content">
页面1
<div>通过this.$route.params.ids获取的参数: {{ userIds }}</div>
<div>通过在routes中设置props:true获取的参数: {{ ids }}</div>
<router-link :to="{ name: 'page1', params: { ids: '1111' } }"
>切换ids</router-link
>
</div>
</template>
在router增加路由独享守卫
{
//记录的路径。应该以 / 开头,除非该记录是另一条记录的子记录。
path: "/view1/:ids",
name: "page1",
// 这样就可以在页面使用props:['参数名']来访问到对应参数
props: true,
// 引入的组件名
component: View1,
meta: {
requireAuth: true
},
beforeEnter:(to,from,next)=>{
console.log(to)
console.log(from)
next()
}
},
可以发现只有在切换页面的时候(page2页面切换至page1页面时)会在控制台打印出信息,而在page1页面点击切换ids时不会在控制台打印出信息
二、路由元信息-meta
配置路由的属性meta用来存放路由的附加信息(比如是否需要进行守卫拦截,谁可以访问等等)
已经在之前的代码展示过了,router.beforeEach中
三、数据获取
1.导航完成之后获取的
先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
2.导航完成之前获取的
导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。