Vue路由守卫之路由独享守卫

路由独立守卫，顾名思义就是这个路由自己的守卫任务，就如同咱们LOL，我们守卫的就是独立一条路，保证我们这条路不要被敌人攻克(当然我们也得打团配合)

在官方定义是这样说的：你可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的。

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

参数如下：

beforeEnter(to,from,next)
// to  要进入的目标，路由对象
// from 当前导航正要离开的路由
// next 初步认为是展示页面；（是否显示跳转页面）
​
next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由

我们在这里使用使用一个案例来演示它的用法；案例中独立路由单独检测是否在登入状态，在没有登录的情况下弹到登录界面，和全局登录效果一致，只不过只保留了自己；

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
​
import Index from './Index/Index.vue'
​
import AA from './views/AA.vue'
import DD from './views/DD.vue'
import EE from './views/EE.vue'
export default {
  routes: [
    {
      path: '/',
      component: Index,
      name: 'index',
      children: [
        {
          path: 'AA',
          component: AA,
          name: 'aa',
          beforeEnter: (to, from, next) => {
            if (to.path == '/DD') {
              next()
            } else {
              alert('请登入');
              next('/DD')
            }
​
          }
        }, {
          path: 'DD',
          component: DD,
          name: 'dd'
        },
        {
          path: 'EE',
          component: EE,
          name: 'ee'
        },
​
      ]
    }
  ]
}

为大家附上源码地址https://gitee.com/web94/vueluyouduxiangshouwei

总结

以上所述是小编给大家介绍的Vue路由守卫之路由独享守卫,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue2.0 实现导航守卫的具体用法（路由守卫）

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 全局守卫 你可以使用 router.beforeEa

  • vue2.0 实现导航守卫（路由守卫）

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 全局守卫 你可以使用 router.beforeEa

  • vue路由守卫+登录态管理实例分析

    本文实例讲述了vue路由守卫+登录态管理.分享给大家供大家参考,具体如下: 在路由文件需要守卫的path后面加上meta {path: '/home',component: home,meta:{requireAuth:true}} 在main.js里面加上 //路由守卫 router.beforeEach((to, from, next) => { console.log(to); console.log(from); if (to.meta.requireAuth) { // 判断该路由是否

  • vue 利用路由守卫判断是否登录的方法

    1.在router下的index.js 路由文件下,引入相关需要文件: import Vue from 'vue' import Router from 'vue-router' import {LOGIN} from '../common/js/islogin' import HelloWorld from '@/components/HelloWorld' import Login from '@/page/Login' import Index from '@/page/index/ind

  • vue路由守卫及路由守卫无限循环问题详析

    先贴一波官方文档的内容 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中. 每个守卫方法接收三个参数: to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用

  • 关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

    #在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate

  • Vue路由守卫之路由独享守卫

    路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合) 在官方定义是这样说的:你可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的. const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ...

  • 详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

    详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程:全局的, 单

  • vue-router 实现导航守卫（路由卫士）的实例代码

    导航守卫 导航守卫即是在路由跳转的时候,根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router

  • Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)

    需求: 最近在做一个网上商城的项目,技术用的是Angular4.x.有一个很常见的需求是:用户在点击"我的"按钮时读取cookie,如果有数据,则跳转到个人信息页面,否则跳转到注册或登录页面 解决 在这里通过Angular的路由守卫来实现该功能. 1. 配置路由信息 const routes = [ { path: 'home', component: HomeComponent }, { path: 'product', component: ProductComponent },

  • 在vue中利用全局路由钩子给url统一添加公共参数的例子

    有的时候我们可能有这样的需求,比如现在url为m.taoyuewenhua.com/#/ 我们需要在用户每次跳转路由的时候监控有没有abc这个参数. 如果有,后端要求我们在以后跳转任何url的时候,都要在url携带上这个参数.就变成m.taoyuewenhua.com/#/&abc=xxx; 这个参数称为"公共参数"; 那么,我们该如何做呢?因为vue中有很多组件.在每个组件都写的话,太麻烦.所以这个时候,全局路由钩子登场了.分别是 router.beforeEach 全局导航

  • Vue Router 实现动态路由和常见问题及解决方法

    个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现

  • vue 动态添加的路由页面刷新时失效的原因及解决方案

    vue 动态添加的路由页面刷新时失效的原因及解决方案

    目录 问题描述 场景 接口返回 前端菜单定义 vuex中的方法 出现的问题 原因分析 解决方案 实现代码 route/index.js的导航守卫中添加逻辑判断 总结 问题描述 昨天在做vue后台管理系统有关权限页面动态添加到路由的功能时,遇到一个问题:动态添加的路由页面,在页面刷新时出现了404的情况. 场景 后台管理系统的权限控制是通过在前端页面定义权限code, 把code给后台同学保存配置到表中,之后根据后台返回的权限code列表与前端页面配置的code菜单列表做筛选匹配,code相等的页

  • Vue实现两种路由权限控制方式

    目录 方式一:路由元信息(meta) 方式二:动态生成路由表(addRoutes) 路由权限控制常用于后台管理系统中,对不同业务人员能够访问的页面进行一个权限的限制. 对于无权限的页面可以跳转404页面或者提示无权限. 方式一:路由元信息(meta) 把所有页面都放在路由表中,只需要在访问的时候判断一下角色权限即可. vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,控制其路由跳转. 在 meta 属性里,将能

随机推荐