5分钟学会vue中的路由守卫

在项目开发中每一次页面的跳转或者刷新，都需要判断用户是否已经登录。后端会进行判断的，前端最好也进行一次判断。

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数：
1、to:即将要进入的目标路由对象；
2、from:当前导航即将要离开的路由对象；
3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。
next()//直接进to 所指路由
next(false) //中断当前路由
next(‘route’) //跳转指定路由
next(‘error’) //跳转错误路由

beforeEach：
路由配置文件：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HomePage from '@/pages/home.vue'
Vue.use(Router)
const router=new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/home',name: 'home',component: HomePage},{path:'*',redirect:'/home'}],
})router.beforeEach((to,from,next)=>{console.log(to);console.log(from);next();})export default router;

打印结果如下：

实现用户验证的代码：

router.beforeEach((to, from, next) => {//我在这里模仿了一个获取用户信息的方法let isLogin = window.sessionStorage.getItem('userInfo');if (isLogin) {//如果用户信息存在则往下执行。next()} else {//如果用户token不存在则跳转到login页面if (to.path === '/login') {next()} else {next('/login')}}
})

afterEach:

和beforeEach不同的是afterEach不接收第三个参数 next 函数，也不会改变导航本身，一般beforeEach用的最多，afterEach用的少.

router.afterEach((to,from)=>{ //这里不接收nextconsole.log(to);console.log(from);
})

到底了！看看别的吧

前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，专业的知识还得到机构去学习，培训机构的设立有其存在的必然性，你钱花对了吗？

推荐阅读：
10分钟搞懂vuex
浅谈hooks
vue 组件设计原则
Tree Shaking 概念详解
深入解读 vue 修饰符 sync

5分钟学会vue中的路由守卫相关推荐

vue中的路由守卫(导航守卫)
在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断. vue-router提供了导航钩子:全局前置导航钩子 beforeEa ...
15分钟学会vue项目改造成SSR
15分钟学会vue项目改造成SSR Ps:网上看了好多服务器渲染的例子,基本都是从0开始的,用Nuxt或者vue官网推荐的ssr方案(vue-server-renderer),但是我们在开发过程中基本 ...
Vue中进行全局守卫
前言:项目中大多数都是通过路由来进行跳转的,但是普遍的都会进行登陆验证后才能进入下一页面,这时候就需要守卫了,本博文主要讲解vue中的全局守卫 . 全局守卫在main.js中进行配置: import ...
三分钟学会css3中的flexbox布局
2019独角兽企业重金招聘Python工程师标准>>> 这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现以往遇到的所有的关于布局 ...
vue中实现路由跳转的三种方式（超详细整理）
vue中实现路由跳转的三种方式一.使用vue-router vue-router 本质是一个第三方的包用的时候需要下载步骤 (7步法 ): 下载vue-router模块到当前工程 yarn ad ...
【Vue】vue中的路由导航守卫(路由的生命周期)
文章目录全局前置守卫可选的第三个参数 `next` 全局解析守卫 router.beforeResolve 全局后置钩子路由独享的守卫组件内的守卫可用的配置 API 使用组合 API 完整的 ...
Vue学习：Vue中的路由详解（完整版）
一.vue-router的理解首先,需要理解一下vue-router: vue-router是vue的一个插件,专门用来实现SPA应用.SPA也就是单页Web应用,特点是:整个应用只有一个完整的页 ...
Vue中vue-router路由使用分析
题记 -- 严于律己,精于行动,点滴积累,着眼未来,你也许不负青春本小节描述 1.前端路由的两种主流实现方式 hash 与 history对象简述 2.分析使用在 vue 中通过 vue-rout ...
vue中的路由跳转和传参
一:注意:在 Vue 实例中,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push("路由地址")来跳转到目标路由页面: 想要导航到不同的 ...

5分钟学会vue中的路由守卫

5分钟学会vue中的路由守卫

5分钟学会vue中的路由守卫相关推荐

最新文章

热门文章