{
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之七导航守卫的更多相关文章

  1. vue router 导航守卫生命周期

    导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$r ...

  2. vue路由导航守卫及前置后置钩子函数参数详解

    首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWo ...

  3. vue关于导航守卫的几种应用场景

    beforeEach 该钩子函数主要用来做权限的管理认证 router.beforeEach((to, from, next) => { if (to.matched.some(record = ...

  4. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  5. Vue的路由动态重定向和导航守卫

    一.重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', ...

  6. Vue(7)- vue-cookies、极验滑动验证geetest、vue-router的导航守卫

    一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...

  7. Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解

    Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: F ...

  8. vue之生命周期与导航守卫

    组件钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed 还有两个特殊 ...

  9. vue进阶:vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

随机推荐

  1. 用DirectDraw封装的位图动画类

    头文件 [cpp] view plaincopyprint? #pragma once #include <vector> using namespace std; #include &l ...

  2. linux下ffmpeg安装

    1.ffmpeg下载地址: http://www.ffmpeg.org/download.html 2.解压 1 $ tar zvfj ffmpeg.tar.bz2 这里作者假设已经重命名为ffmpe ...

  3. java.sql.SQLException之数组越界

    java.sql.SQLException之数组越界 1.具体错误如下: (1)java.sql.SQLException:Parameter index out of range(0<1) ( ...

  4. freemarker写select组件(三)

    freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...

  5. java.sql.SQLException:Column Index out of range,0<1

    1.错误描述 java.sql.SQLException:Column Index out of range,0<1 2.错误原因 try { Class.forName("com.m ...

  6. Linux显示机器的处理器架构

    Linux显示机器的处理器架构 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ arch x86_64 youhaidong@youhaidong-ThinkP ...

  7. html标签自带样式总结

    一.html标签自带样式 head { display:none; } body { margin:8px; line-height:1.12; } button, textarea, input, ...

  8. 从Git到GitHub,详细教程

    众所周知,一个稍微有点规模的项目,都不可能是一个人单打独斗完成的(能完成的大神别打我),所以,一个高效的项目团队就需要一个NB的工具来进行有效的交流(曾经有人问我企鹅不就可以吗,我竟无言以对),今天就 ...

  9. python datetime 与 time模块

    time模块 tmie.strptime :将时间字符串转化为时间类型 格式:time.strptime(string[string[, format]) 结果可以利用利用time.tm_year 返 ...

  10. jQuery.extend 函数使用详解

    JQuery的extend扩展方法:      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解.      一.Jquery的扩展方 ...