Vue之七导航守卫
{
path:'/',component:Recommend,beforeEnter: (to, from, next) => {
console.log(to);
ajax('get','/api/mall/categoryList',true,'',res=>{
var data=res.data;
if(data[0].categoryName=="推荐"){
next({path:'/Recommend',query:{categoryId:data[0].categoryId}})
}else if(data[0].categoryName=="房卡"){
next({path:'/RoomCard',query:{categoryId:data[0].categoryId}})
}else if(data[0].categoryName=="钻石"){
next({path:'/Diamonds',query:{categoryId:data[0].categoryId}})
}else if(data[0].categoryName=="金币"){
next({path:'/Gold',query:{categoryId:data[0].categoryId}})
}else if(data[0].categoryName=="礼包"){
next({path:'/Package',query:{categoryId:data[0].categoryId}})
}else if(data[0].categoryName=="道具"){
next({path:'/Prop',query:{categoryId:data[0].categoryId}})
}
})
}
},
Vue之七导航守卫的更多相关文章
- vue router 导航守卫生命周期
导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$r ...
- vue路由导航守卫及前置后置钩子函数参数详解
首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWo ...
- vue关于导航守卫的几种应用场景
beforeEach 该钩子函数主要用来做权限的管理认证 router.beforeEach((to, from, next) => { if (to.matched.some(record = ...
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- Vue的路由动态重定向和导航守卫
一.重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', ...
- Vue(7)- vue-cookies、极验滑动验证geetest、vue-router的导航守卫
一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...
- Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解
Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: F ...
- vue之生命周期与导航守卫
组件钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed 还有两个特殊 ...
- vue进阶:vue-router之导航守卫、路由元信息、路由懒加载
1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...
随机推荐
- jquery源码分析之一前言篇
1.问:jquery源码分析的版本是什么? 答:v3.2.1 2.问:为什么要分析jquery源码? 答:javascript是一切js框架的基础,jquery.es6.vue.angular.rea ...
- linux rsync实时同步
rsync同步 同步与复制的差异:复制:完全拷贝源到目标同步:增量拷贝,只传输变化过的数据 同步操作:remote sync 远程同步支持本地复制,或与其他ssh,rsync主机同步.官方网站:htt ...
- java容器类分析:Collection,List,ArrayList
1. Iterable 与 Iterator Iterable 是个接口,实现此接口使集合对象可以通过迭代器遍历自身元素. public interface Iterable<T> 修饰符 ...
- alsa声卡分析alsa-utils调用过程
如何分析tinyplay 播放音频和tinymix的过程?需要相应的工具来支持追查: 一.利用strace工具分析tinyplay和tinymix: strace -o tinyplay.log ti ...
- 玩转FFmpeg的7个小技巧
FFmpeg堪称音频和视频应用程序的瑞士军刀,提供了丰富的选项和灵活性.很多时候用户为了看视频和听音乐都安装了ffmeg.更多关于ffmeg的详细介绍:here,可以通过ffmpeg -formats ...
- Android RocooFix热修复动态加载框架介绍
RocooFix Another hotfix framework 之前的HotFix项目太过简单,也有很多同学用Nuwa遇到很多问题,作者也不再修复,所以重新构建了一套工具. Bugfix 2016 ...
- ClientToScreen 和ScreenToClient 用法
ClientToScreen( )是把窗口坐标转换为屏幕坐标 ScreenToClient( )是把屏幕坐标转换为窗口坐标 屏幕坐标是相对于屏幕左上角的,而窗口坐标是相对于窗口用户区左上角的 VC下, ...
- java程序调用xfire发布的webService服务(二)
在上一篇的调用xfire发布的webService服务中,我只是从服务端返回了一个字符串给客户端,却没有测试从客户端传递数据给服务端.而实际应用中一般是不太可能只出现这样的应用场景的,因此我便更进一步 ...
- uboot 添加hello命令
平台:MPC8315(POWERPC) 1.在/common/ 目录下创建自己的文件,最好前缀为cmd_. cmd_hello.c ********************************** ...
- Jlink 烧写Uboot
第一章 Hi3531_SDK_Vx.x.x.x版本升级操作说明 如果您是首次安装本SDK,请直接参看第2章. 第二章首次安装SDK 1.Hi3531 SDK包位置 在"Hi3531_V100 ...