Vue--Router--钩子函数(导航守卫)--使用场景/实例

墨蓝 2023-09-28 20:01 7阅读 0赞

原文网址：[Vue--Router--钩子函数(导航守卫)--使用场景/实例\_IT利刃出鞘的博客-CSDN博客][Vue--Router--_--_IT_-CSDN]

## 简介 ##

本文介绍Vue Router的导航守卫的使用。

## 全局的钩子 ##

### **beforeEach** ###

全局前置导航守卫，加载页面之前执行。

**应用场景**

1.  页面跳转前处理。例如：拦截需要登录的页面，跳转到登录页面
2.  进入页面登录判断、管理员权限判断、浏览器判断

**示例代码**

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** ###

进入某个个路由前执行。

应用场景

1.  将上一个组件传过来的参数拼到新的路由的后边

**示例代码**

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

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();
    });

[Vue--Router--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126312619