原文网址：Vue--Router--钩子函数(导航守卫)--使用场景/实例_IT利刃出鞘的博客-CSDN博客
简介
本文介绍Vue Router的导航守卫的使用。
全局的钩子
beforeEach
全局前置导航守卫，加载页面之前执行。
应用场景
示例代码
router/index.js
router.beforeEach((to, from, next) => {
const role = localStorage.getItem('ms_username');
if(!role && to.path !== '/login'){
next('/login');
}else if(to.Meta.permission){
// 如果是管理员权限则可进入，这里只是简单的模拟管理员权限
role === 'admin' ? next() : next('/403');
}else{
// 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
Vue.prototype.$alert(
'vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看',
'浏览器不兼容通知',
{confirmButtonText: '确定'}
);
}else{
next();
}
}
})
单个路由的钩子
beforeEnter
进入某个个路由前执行。
应用场景
- 将上一个组件传过来的参数拼到新的路由的后边
示例代码
router/index.js
const routes = [
{
path: '/',
beforeEnter: (to, from, next) => {
const href = window.location.href
const queryString = href.slice(href.indexOf('?'))
// 即将跳转到某个路由之前，把上一个路由的参数拼接在要重定向的路由的后面
// 可以用来初始化页面数据
next({ path: `/home/dashboard${queryString}`, replace: true })
}
},
// ...
]
组件内的钩子
它们的写法：
<template>
<div>
这是Demo
</div>
</template>
<script>
export default {
name: 'Demo',
beforeRouteLeave (to, from) {
console.log('来自：' + from.name)
console.log('去往：' + to.name)
}
}
</script>
<style scoped>
</style>
应用场景1：清除当前组件中的定时器
当一个组件中有一个定时器时, 在路由进行切换的时候, 可使用beforeRouteLeave将定时器进行清楚, 以免占用内存。
beforeRouteLeave (to, from, next) {
window.clearInterval(this.timer) //清除定时器
next()
}
应用场景2：阻止页面跳转
如果页面内有重要的信息需要用户保存后才能进行跳转, 或者有弹出框的情况，应该阻止用户跳转，结合vuex状态管理（dialogVisibility是否有保存）
beforeRouteLeave (to, from, next) {
//判断是否弹出框的状态和保存信息与否
if (this.dialogVisibility === true) {
this.dialogVisibility = false //关闭弹出框
next(false) //回到当前页面, 阻止页面跳转
}else if(this.saveMessage === false) {
alert('请保存信息后退出!') //弹出警告
next(false) //回到当前页面, 阻止页面跳转
}else {
next() //否则允许跳转
}
}
应用场景3：保存内容到
保存相关内容到Vuex中或Session中。
当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中
beforeRouteLeave (to, from, next) {
localStorage.setItem(name, content); //保存到localStorage中
next()
}
写法
需求：通过判断登录状态的 Meta 属性auth来确定是否需要登录
写法1：在Router定义处使用
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
const vueRouter = new Router({
routes: [
{
path: '/login',
name: 'login',
component: login,
},
{
path: '/index',
name: 'index',
component: index,
Meta:{auth:true,keepAlive: false},
children: [
{name: 'children1', path: 'children1', component: children1},
{name: 'children2', path: 'children2', component: children2}
]
}
]
});
vueRouter.beforeEach(function (to, from, next) {
const nextRoute = [ 'index', 'children1', 'children2'];
// const auth = store.state.auth; //在vueX中保存状态
const auth = Meta.auth;
//跳转至上述3个页面
if (nextRoute.indexOf(to.name) >= 0) {
//未登录
if (!auth.IsLogin) {
vueRouter.push({name: 'login'})
}
}
//已登录的情况再去登录页，跳转至首页
if (to.name === 'login') {
if (auth.IsLogin) {
vueRouter.push({name: 'index'});
}
}
next();
});
写法2：在main.js中插入
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
const vueRouter = new Router({
routes: [
{
path: '/login',
name: 'login',
component: login,
},
{
path: '/index',
name: 'index',
component: index,
Meta:{auth:true,keepAlive: false},
children: [
{name: 'children1', path: 'children1', component: children1},
{name: 'children2', path: 'children2', component: children2}
]
}
]
});
export default vueRouter;
main.js
import vueRouter from './router'
vueRouter.beforeEach(function (to, from, next) {
const nextRoute = [ 'index', 'children1', 'children2'];
// const auth = store.state.auth; //在vueX中保存状态
const auth = Meta.auth;
//跳转至上述3个页面
if (nextRoute.indexOf(to.name) >= 0) {
//未登录
if (!auth.IsLogin) {
vueRouter.push({name: 'login'})
}
}
//已登录的情况再去登录页，跳转至首页
if (to.name === 'login') {
if (auth.IsLogin) {
vueRouter.push({name: 'index'});
}
}
next();
});
