在某个路由中,使用beforeEnter()方法,参数是to,from,next

和全局路由守卫的用法是一样的

例子:

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3.  
  4. Vue.use(Router)
  5. import Home from '../../view/Home.vue'
  6. import Test from '../../view/Test.vue'
  7. import News from '../../view/News.vue'
  8. export default new Router({
  9. routes: [
  10. {
  11. name:"Home",
  12. path:"/",
  13. component:Home,
  14. },
  15. {
  16. name:"Test",
  17. path:"/test",
  18. component:Test,
  19. beforeEnter(to,from,next){
  20. if(to.path==="/test"){
  21. alert("请登录");
  22. next(false); // 禁止跳转
  23. }else{
  24. next()
  25. }
  26. }
  27. },
  28. {
  29. name:"News",
  30. path:"/news",
  31. component:News
  32. },
  33. {
  34. redirect:"/",
  35. path:"*",
  36. }
  37. ],
  38. mode:"history"
  39. })

vue路由独享守卫beforeEnter的更多相关文章

  1. vue中的路由独享守卫的理解

    1.vue中路由独享守卫意思就是对这个路由有一个单独的守卫,因为他的守卫方式于其他的凡是不太同 独享守卫于前置守卫使用方法大致是一样的 在路由配置的时候进行配置, { path:'/login', c ...

  2. vue组件独享守卫钩子函数参数详解(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

    一样的和前面路由钩子类似的步骤 首先在demo下面的components下面新建一个test.vue组件 test组件代码 <template> <div class="t ...

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

    ​ 路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合) 在官方定义是这样说的:你可以在路由配置上直接定义 ...

  4. [Vue]导航守卫:全局的、单个路由独享的、组件级的

    正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的 ...

  5. vue路由守卫触发顺序

    不同组件之间的路由跳转流程图 导航被触发(A–>B) 调用A组件内路由守卫beforeRouteLeave(to,from,next) 调用全局路由前置守卫router.beforeEach(t ...

  6. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  7. Vue | 路由守卫面试常考

    前言 最近在整理基础,欢迎掘友们一起交流学习 结尾有彩蛋哦! Vue Router 路由守卫 导图目录 路由守卫分类 全局路由守卫 单个路由守卫 组件路由守卫 路由守卫执行的完整过程 路由守卫分类 全 ...

  8. vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )

    导航守卫 一.全局导航守卫 1. 全局导航守卫,把方法给 router,只要路由发生改变跳转都会触发这个函数 2. 每个路由 都有一个 meta 3. 全局导航守卫分两种: 1. 全局前置导航守卫:路 ...

  9. vue路由知识整理

    vue路由知识整理 对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(compo ...

随机推荐

  1. Linux网络编程学习(九) ----- 消息队列(第四章)

    1.System V IPC System V中引入的几种新的进程间通信方式,消息队列,信号量和共享内存,统称为System V IPC,其具体实例在内核中是以对象的形式出现的,称为IPC 对象,每个 ...

  2. SQL Server中与IO相关的等待类型:IO_COMPLETION和PAGEIOLATCH_*

    一个大的SQL语句操作,执行计划中包含了一个merge join操作,观察到SQL长时间处于IO_COMPLETION等待状态,如果是读取相关的表的数据,服务器应该全力为其服务,但是服务器的物理IO又 ...

  3. 20175213 2018-2019-2 《Java程序设计》第4周学习总结

    ## 教材学习内容总结 在第四周的学习过程中,我学习了第五章的内容. 第五章内容总结: 1.子类继承的方法只能操作子类继承和隐藏的成员变量. 2.子类和父类在同一包的继承性 子类自然继承了其父类中不是 ...

  4. QUARTZ系列之二-监听器

    Listener 1.是什么: perform actions based on events occurring within the scheduler. 2.分类:a.TriggerListen ...

  5. 浅析MVC模式与三层架构的区别

    浅析MVC模式与三层架构的区别 三层架构和MVC是有明显区别的,MVC应该是表现模式(三个加起来以后才是三层架构中的UI层).三层架构(3-tier application) 通常意义上的三层架构就是 ...

  6. eleTree树形插件引入

    先放一个效果 @eleTree插件官网 刚开始用的xtree,不知为何总是达不到效果,不得已从layui官网插件中寻得这个eleTree插件,看着还不错,用法也简单.不过还是有点坑需要大家注意 开始使 ...

  7. Spring Boot HikariCP 一 ——集成多数据源

    其实这里介绍的东西主要是参考的另外一篇文章,数据库读写分离的. 参考文章就把链接贴出来,里面有那位的代码,简单明了https://gitee.com/comven/dynamic-datasource ...

  8. MySQL主主

    MySQL双主(主主)架构方案   在企业中,数据库高可用一直是企业的重中之重,中小企业很多都是使用mysql主从方案,一主多从,读写分离等,但是单主存在单点故障,从库切换成主库需要作改动.因此,如果 ...

  9. 微信小程序的开发

    https://www.cnblogs.com/jackson-zhangjiang/p/9843696.html

  10. File初识和练习

    目录 File类 File对象的构建 File文件名.路径的获取 文件的状态 文件的其他操作 创建文件夹 列出下一级 实战练习1:列出子孙级目录及名称 实战练习2:列出文件及其子孙文件的总大小 实战练 ...