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.在重用组件里 ...
随机推荐
- R实战 第三篇:数据处理(基础)
数据结构用于存储数据,不同的数据结构对应不同的操作方法,对应不同的分析目的,应选择合适的数据结构.在处理数据时,为了便于检查数据对象,可以通过函数attributes(x)来查看数据对象的属性,str ...
- Linux PCI/PCI-E设备配置空间读取与修改
Linux PCI/PCI-E设备配置空间读取与修改 1 前言 PCI和PCI Express,是计算机常使用的一种高速总线.操作系统中的PCI/PCI-E设备驱动以及操作系统内核,都需要访问PCI及 ...
- 第6章 MSI和MSI-X中断机制
在PCI总线中,所有需要提交中断请求的设备,必须能够通过INTx引脚提交中断请求,而MSI机制是一个可选机制.而在PCIe总线中,PCIe设备必须支持MSI或者MSI-X中断请求机制,而可以不支持IN ...
- R语言︱LDA主题模型——最优主题数选取(topicmodels)+LDAvis可视化(lda+LDAvis)
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:在自己学LDA主题模型时候,发现该模 ...
- FusionCharts封装-单系列图组合
ChartAction.java: /** * @Title:ChartAction.java * @Package:com.fusionchart.action * @Description:单系列 ...
- linux下面的fd限制
如果不考虑内存大小的限制,在linux下面,fd (即file descriptor)的数量来自2个限制(阈值).其一:是操作系统的限制.这个限制主要是在linux内核中,我们知道,用户程序的fope ...
- linux内核移植X86平台的例子
bootloader支持启动多个Linux 内核安装(X86平台) 1. cparch/x86/boot/bzImage /boot/vmlinuz-$version 2. cp $initrd /b ...
- WIN7 嵌入式系统安装教程 Windows Embedded Standard 2011 安装
轻松构建你的第一个 Windows Embedded Standard 2011 镜像.通过本文你可以快速掌握如何使用Windows Embedded Standard 2011 CTP1 来构建一个 ...
- 错误号码2003 Can't connect to MySQL server 'localhost' (0)
错误描述 错误原因 最近,我一直都可以用SQLyog连接本地数据库,但是近几天却无法连接:并且一直都报上述错误,我查阅了很多资料,发现有很多中说法 总结一下 第一,MySQL中的my.ini出错: 第 ...
- android界面设计之布局管理
谈到android界面设计,各种布局样式不得不提!传统的布局方式有6种,我们会一一介绍. 在android studio2.2版本之后出现了一款超棒的布局方式,真正意义上的所见即所得,后面我们也会讲到 ...