《Vue-Router导航守卫快速了解与应用》由会员分享，可在线阅读，更多相关《Vue-Router导航守卫快速了解与应用（16页珍藏版）》请在金锄头文库上搜索。
1、Vue-Router导航守卫快速了解与应用 【摘要】 一.简介与小案例：嘿，最近你还好吗？()。我昨晚看到了这样的一句话： 他们想把我埋了，却不知道我是一颗种子。我不知道作者是谁，不过我想肯定是一个温柔且坚强的人吧。希望我和你们都可以充满希望，向阳而开。对了，今天，就分享一下vue导航守卫的快速了解与应用，对这部分基础不了解的同学可以快速上手。在我们通过 vue-router 路由发生跳转时的，也可以用导航这一词概括。.一.简介与小案例：嘿，最近你还好吗？()。今天，就分享一下vue路由导航守卫的快速了解与应用，对这部分基础不了解的同学可以快速上手。在我们通过 vue-router 路由发生跳
2、转时的，也可以用导航这一词概括。导航就是表示路由正在发生改变。而导航守卫就可以说成是监听这一改变。当路由跳转时不能直接跳转，会先经过导航守卫设定的条件，通过条件判断接下来该执行什么操作，给不给跳转，或者应该跳到哪里，或者其它操作。 先不谈 vue 提供的导航守卫，假如我们要自己实现 守卫 该怎么实现呢？下面有一个小案例，快速了解 守卫 概念。1.首先新建了一个vue脚手架项目，并新建一个login.vue与user.vue文件，（假如login为自己定义的登录页，user为个人信息页）然后在路由配置中添加这两个文件的路径，最后在App.vue页面中添加对应的路由链接。以上，为路由的基本使用，就
3、不演示了。最后运行效果如下：其中，路由配置我是这样：import Vue from vueimport VueRouter from vue-routerimport Home from ./views/Home.vueimport Login from ./views/login/login.vueimport User from ./views/user/user.vueVue.use(VueRouter)const routes = path: /, name: Home, component: Home , path:/login, component: Login , path:/u
4、ser, component:User , path: /about, name: About, component: () = import(/* webpackChunkName: about */ ./views/About.vue) const router = new VueRouter( mode: history, base: process.env.BASE_URL, routes)export default router2. 现在，要实现守卫的概念。就是当我没有在登录页进行登录时，直接点击User时，路由不会跳转到user页面，会直接跳转到login登录页面，只有当我在登录
5、页登录后，点击User才能跳转到user页面：login.vue页面代码如下，本来登录是要向服务器发一次请求的，因为是演示，所以这里登录不会调用接口。那我们就假如登录后会把账号存储在浏览器本地存储中，当跳转到user页面时，user页面判断本地存储是否存在登录账号信息，存在则显示，否则强行跳到登录页： 这是登录页面，登录后才可查看个人信息页面 账号： 密码： 登录 export default data() return username: , password: , ; , methods: signIn() / 保存账号信息 let token = this.username; / 本地存
6、储 localStorage.setItem(token, token); , ,;使用 localStorage 创建一个本地存储的 name/value 对。user.vue页面如下，在生命周期 created 阶段，进行判断是否登录： 个人信息页面 账号： username 博客：北极光之夜。 export default data() return username: , ; , methods: , created() / 获取本地存储 var token = localStorage.getItem(token); console.log(token); / 判断是否有登录信息 i
7、f (token) / 有则给username赋值 this.username = token; else / 没有则路由跳转到登录页 this.$router.push(/login); ,;效果如下，没登录时，本地存储没信息，路由不会跳转到user页面，会直接跳转到login登录页面：登录后，本地存储有值，可以跳转：以上，就基本演示了下守卫的概念，不过是比较繁琐的，假如有很多页面，我们不可能在每个页面都写一次获取和判断，所以我们要引入 vue 中导航守卫，快速实现守卫。二.vue导航守卫：导航守卫官方文档链接：https:/router.vuejs.org/zh/guide/advance
8、d/navigation-guards.html1.全局前置守卫：全局前置守卫用于控制每一次路由跳转，叫做 router.beforeEach，可以使用 router.beforeEach 注册一个全局前置守卫。这个一般写在vue项目中的src文件夹下的 main.js 中：我的main.js文件内容：import Vue from vueimport App from ./App.vueimport router from ./routerimport store from ./storeVue.config.productionTip = false/ 添加全局前置守卫router.bef
9、oreEach(to,from,next)= console.log(to,from,next); next();)new Vue( router, store, render: h = h(App).$mount(#app)可以看到，写法如下：router.beforeEach(to,from,next)= console.log(to,from,next); next();)看控制台输出，to,from,next代表什么：看得出to、from都是对象，next为方法。还是直接上概念，其中to、from、next 参数意思如下：参数意义to代表将要跳到哪个路由from代表之前是来自哪个路由n
10、ext（）进行正常跳转next（false）取消跳转next（“路径”）或者next( path: 路径 )路由重定向，跳转到其它页面需要注意的是，要确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。如，我现在要实现无法跳转到login页面，其它页面能正常跳转，应该如下实现：router.beforeEach(to,from,next)= /如果将要跳到login，则取消跳转 if(to.path=/login) next(false); else / 否则正常跳转 next(); )效果：
11、现在，用全局前置守卫实现第一大点那个小案例：router.beforeEach(to,from,next)= if(to.path = /user) if(localStorage.getItem(token) next(); else next(/login); else next(); )看，也是一样可以的：假如现在进入about页面也要登录才能进，则如下直接在 if 里添加一个或条件就好：router.beforeEach(to,from,next)= if(to.path = /user | to.path = /about) if(localStorage.getItem(token
12、) next(); else next(/login); else next(); )2. 路由守卫：运行在路由上的守卫，只有进入到当前路由页面的时候才会执行的守卫函数，叫做 beforeEnter。它一般直接在路由配置里写的。如我在/user的配置对象里写，只有在user页面这个守卫在生效：const routes = path: /, name: Home, component: Home , path:/login, component: Login , / 在user这里面写 path:/user, component:User, beforeEnter: (to, from, next) = / 输出看看
