Vue 路由 导航守卫(全局守卫、组件内守卫、路由独享守卫)
一.全局守卫
1. router.beforeEach((to,from,next)=>{})
2. 回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否展示你要看到的路由页面。
3. 如下例:main.js中设置全局守卫
在main.js中,有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。如下,判断to.path当前将要进入的路径是否为登录或注册,如果是就执行next(),展示当前界面。如果不是,就弹出alert,然后移至登录界面。这样就可实现,用户在未登录状态下,展示的一直是登录界面。
router.beforeEach((to,from,next)=>{if(to.path == '/login' || to.path == '/register'){next();}else{alert('您还没有登录,请先登录');next('/login');}
})
4. 全局后置钩子router.afterEach((to,from)=>{})
- 只有两个参数,to:进入到哪个路由去,from:从哪个路由离。
- 如下,每次切换路由时,都会弹出alert,点击确定后,展示当前页面。
二.组件内的守卫
1. 到达这个组件时,beforeRouteEnter:(to,from,next)=>{}
- 在Admin.vue文件中,点击转到admin路由时,执行beforeRouteEnter函数
- to,from参数与上面使用方法一致。next回调函数略有不同。
- 如下例,data 组件内守卫有特殊情况,如果我们直接以
beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}
进行访问admin页面,会发现alert输出hello undefined
。这是因为,现在访问不到我们的data属性,执行顺序是不一致,这与的声明周期有关。在执行完之前,data数据还未渲染。所以这里,next()会给一个对应的回调,帮助完成。
<script>
export default {data(){return{name:"Arya"}},beforeRouteEnter:(to,from,next)=>{next(vm=>{alert("hello" + vm.name);})}
}
</script>
2. 离开这个组件时,beforeRouteLeave:(to,from,next)=>{}
点击其他组件时,判断是否确认离开。确认执行next();取消执行next(false),留在当前页面。
beforeRouteLeave:(to,from,next)=>{if(confirm("确定离开此页面吗?") == true){next();}else{next(false);}}
三.路由独享的守卫
1. beforeEnter:(to,from,next)=>{},用法与全局守卫一致。只是,将其写进其中一个路由对象中,只在这个路由下起作用。
const router = new VueRouter({routes: [{path: '/foo',component: Foo,beforeEnter: (to, from, next) => {// ...}}]
})
Vue 路由 导航守卫(全局守卫、组件内守卫、路由独享守卫)相关推荐
- Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫 官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
- Vue中 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫 官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
- vue3:路由守卫(全局守卫、路由独享守卫、组件内守卫)
router.js:全局守卫 import {createRouter,createWebHashHistory } from 'vue-router'// 省略了routes 中的路由规则 cons ...
- vue路由(十二)路由独享守卫beforeEnter和页面内组件路由守卫:beforeRouteEnter,beforeRouteLeave,beforeUpdate
1 路由独享守卫,单个路由拦截处理 {path: '/Test',name: 'Test',components: {default: () => import('../views/Test.v ...
- 路由守卫的几种方法、全局守卫、路由独享守卫、组件内部守卫
路由独享守卫,守的是path 组件内部守卫,守的是component 全局守卫 // src/router/index.js1.前置钩子router.beforeEach((to, from, nex ...
- vue 路由独享守卫
想进到'trade'页面 必须从shopcart进来 否则进不去 beforeEnter:(to,from,next)=> {if(from.path == '/shopcart'){next( ...
- Vue 路由 导航守卫(全局守卫、路由独享守卫、组件内守卫)
一.全局守卫 1. router.beforeEach((to,from,next)=>{}) 2. 回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否 ...
- 前端学习(3021):vue+element今日头条管理--创建组件和配置路由
- 前端学习(3002):vue+element今日头条管理--创建组件和设置路由
- Vue Router 组件内的守卫、导航解析流程
可以在路由组件内直接定义路由导航守卫(传递给路由配置的) 可用的配置 API beforeRouteEnter 在渲染该组件的对应路由被验证前调用. 此时不能获取组件实例 this , 因为当守卫执行 ...
最新文章
- HDU3415 Max Sum of Max-K-sub-sequence
- oracle怎么按时间查找,JDBC:我如何在Oracle中按时间查询?
- c语言16进制数给变量,C语言中怎样定义能够保存16进制整数的变量
- 浅析字符串的replace方法应用
- Android菜单详解
- C语言编程软件的下载安装、使用和写代码
- 移动端:纯html 基于 mescroll 插件实现上拉加载,下拉刷新,返回顶部
- 如何写出干净整洁的代码
- 新手兼职也能月入5000的副业项目,几乎零门槛
- Linux:DNS域名解析服务
- 如何判断两条线(轨迹)的重叠区域
- 三、动态构建GStreamer管道
- 三色球问题python_零基础入门学习Python习题3【输密码+水仙花数+摸三色球】
- Ghidra Java API报NoClassDefFoundError的解决方法
- 配置局域网内电脑快速传输数据
- WSTMall微信版
- C++主流IDE推荐
- poi 读取word 遍历表格和单元格中的图片
- DCDC基础(8)-- 同步BUCK芯片的电性能参数解读二
- 【LeetCode】55. 跳跃游戏 (JavaScript)
热门文章
- 如何清除谷歌浏览器中的counterflix广告病毒
- “crol/cror”函数实现流水灯
- JavaScript 文件上传完整指南,附【图书中奖者名单】
- 技术可行性分析注意哪些内容?
- httpservlet.java:131_网上竞价合同(WSJJ-东部新区-(2020)0076号-04)
- 米尔MYD-JX8MPQ yocto 编译流程 (记录)
- Scala:par并行集合计算(fold、aggregate)结果与cpu内核线程的关系
- 简要介绍无刷电机的基础知识
- STM32F103驱动无刷直流电机应用思路
- Java中Math类的随机数公式