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


Posted in Javascript onSeptember 25, 2019

路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们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'
        },
​
      ]
    }
  ]
}

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

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

总结

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

Javascript 相关文章推荐
IE中createElement需要注意的一个问题
Jul 13 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 #Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 #Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 #Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 #Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 #Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 #Javascript
vue+axios实现post文件下载
Sep 25 #Javascript
You might like
基于PHP array数组的教程详解
2013/06/05 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
joomla组件开发入门教程
2016/05/04 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
详解Python中heapq模块的用法
2016/06/28 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
python3转换code128条形码的方法
2019/04/17 Python
django将数组传递给前台模板的方法
2019/08/06 Python
python的scipy实现插值的示例代码
2019/11/12 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
运动会开幕式主持词
2014/03/28 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
三十年同学聚会感言
2015/07/30 职场文书