vue-router 实现导航守卫(路由卫士)的实例代码

 更新时间:2018年09月02日 07:44:03   作者:李小成  
这篇文章主要介绍了vue-router 实现导航守卫(路由卫士)的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

导航守卫

导航守卫即是在路由跳转的时候,根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。

对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。

导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。

贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

全局守卫

你可以使用 router.beforeEach 注册一个全局前置守卫:

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数:

•to: Route: 即将要进入的目标 路由对象

•from: Route: 当前导航正要离开的路由

•next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法,否则钩子就不会被 resolved。

下面写一个例子:

1.列举需要判断登录状态的“路由集合”,当跳转至集合中的路由时,如果“未登录状态”,则跳转到登录页面LoginPage;

2.当直接进入登录页面LoginPage时,如果“已登录状态”,则跳转到首页HomePage;

import Vue from 'vue';
import Router from 'vue-router';
import LoginPage from '@/pages/login';
import HomePage from '@/pages/home';
import GoodsListPage from '@/pages/good-list';
import GoodsDetailPage from '@/pages/good-detail';
import CartPage from '@/pages/cart';
import ProfilePage from '@/pages/profile';
Vue.use(Router)
const router = new Router({
 routes: [
  {
   path: '/', // 默认进入路由
   redirect: '/home'  //重定向
  },
  {
   path: '/login',
   name: 'login',
   component: LoginPage
  },
  {
   path: '/home',
   name: 'home',
   component: HomePage
  },
  {
   path: '/good-list',
   name: 'good-list',
   component: GoodsListPage
  },
  {
   path: '/good-detail',
   name: 'good-detail',
   component: GoodsDetailPage
  },
  {
   path: '/cart',
   name: 'cart',
   component: CartPage
  },
  {
   path: '/profile',
   name: 'profile',
   component: ProfilePage
  },
  {
   path: '*',  // 匹配没有注册的路由
   redirect: '/home'  //重定向
  },
 ]
});
// 全局路由守卫
router.beforeEach((to, from, next) => {
 console.log('navigation-guards');
 // to: Route: 即将要进入的目标 路由对象
 // from: Route: 当前导航正要离开的路由
 // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
 const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
 let isLogin = global.isLogin; // 是否登录
 // 未登录状态;当路由到nextRoute指定页时,跳转至login
 if (nextRoute.indexOf(to.name) >= 0) { 
  if (!isLogin) {
   console.log('what fuck');
   router.push({ name: 'login' })
  }
 }
 // 已登录状态;当路由到login时,跳转至home 
 if (to.name === 'login') {
  if (isLogin) {
   router.push({ name: 'home' });
  }
 }
 next();
});
export default router;

总结

以上所述是小编给大家介绍的vue-router 实现导航守卫(路由卫士)的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • Vue格式化数据后切换页面出现NaN问题及解决

    Vue格式化数据后切换页面出现NaN问题及解决

    这篇文章主要介绍了Vue格式化数据后切换页面出现NaN问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue3中实现div拖拽功能

    Vue3中实现div拖拽功能

    这篇文章主要介绍了Vue3中实现div拖拽功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • Vue3如何使用Vue-Router进行路由控制

    Vue3如何使用Vue-Router进行路由控制

    无论是小型项目还是中大型项目,Vue-Router都是必选的一个组件,Vue-Router提供了便捷的方式进行路由跳转,在使用过程中有一些坑,希望能给在编码找不到问题时的码农提供一点灵感
    2022-06-06
  • vue2中less的安装以及使用教程

    vue2中less的安装以及使用教程

    less是css预处理器,对原先css进行了扩展和补充,下面这篇文章主要给大家介绍了关于vue2中less的安装以及使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 解读vue生成的文件目录结构及说明

    解读vue生成的文件目录结构及说明

    本篇文章主要介绍了解读vue生成的文件目录结构及说明,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 使用el-upload组件实现递归多文件上传的全过程

    使用el-upload组件实现递归多文件上传的全过程

    el-upload组件文件上传都是每个文件请求一次接口,本次实现一次请求上传多个文件,下面这篇文章主要给大家介绍了关于使用el-upload组件实现递归多文件上传的相关资料,需要的朋友可以参考下
    2023-03-03
  • 关于vue中根据用户权限动态添加路由的问题

    关于vue中根据用户权限动态添加路由的问题

    每次路由发生变化时都需要调用一次路由守卫,并且store中的数据会在每次刷新的时候清空,因此需要判断store中是否有添加的动态路由,本文给大家分享vue中根据用户权限动态添加路由的问题,感兴趣的朋友一起看看吧
    2021-11-11
  • vue中的封装常用工具类

    vue中的封装常用工具类

    这篇文章主要介绍了vue中的封装常用工具类,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue导入.md文件的步骤(markdown转HTML)

    vue导入.md文件的步骤(markdown转HTML)

    这篇文章主要介绍了vue导入.md文件的步骤(markdown转HTML),帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • VUE3页面div如何点击改变样式

    VUE3页面div如何点击改变样式

    这篇文章主要介绍了VUE3页面div如何点击改变样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论