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}})
				}
			})
      }
 	},

  

原文地址:https://www.cnblogs.com/yiyi17/p/8311764.html

时间: 2024-10-06 21:11:58

Vue之七导航守卫的相关文章

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

首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' Vue.use(Router) const router = new Router({ routes: [{ path: '/', name: 'HelloWorld', component: resolve => require

vue2路由导航守卫(钩子函数)

所谓的Vue路由导航守卫,也就是我们常说的生命周期钩子函数,钩子函数的意思就是在特定的时刻,Vue会自动触发这个方法,我们可以通过这些个钩子函数,实现一些功能,比如,某些页面需要登录后才可以访问,某些页面需要用户达到什么等级才可以访问,又或者是跳转页面后修改一些信息等等,我们就可以通过路由导航守卫来拦截并做相应的处理 全局守卫: 挂载在router实例上 全局前置钩子 注意:参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对这些变化,或使用 beforeRo

vue导航守卫

三部分 router(VueRouter实例)守卫 -- 全局路由守卫 router守卫 -- 路由守卫 component守卫 -- 组件守卫 const router = new Router({}) router.beforeEach(function (to,from,next) {} // export default router router.beforeEach(function (to,from,next) { // console.log(to,from) if(to.nam

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

Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子.执行效果依赖 next 方法的调用参数. next(): 进行管道中的下一个钩子.如果全部钩子执行完了,则导航的状态就是 confirmed (确认的). next(false): 中断当前的导航.如果浏览器的 URL 改变了(可能是用

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

前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... 前端进阶积累.公众号.GitHub Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法

vue导航守卫和axios拦截器的区别

在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时触发) 我们主要介绍的是可以验证用户登录状态的全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中. const router = new VueRouter({ ... }) router.beforeEach(

vue 导航守卫,验证是否登录

路由跳转前,可以用导航守卫判断是否登录,如果登录了就正常跳转,没有登录就把路由指向登录页面. router.beforeEach((to, from, next) => { const nextRoute = [ 'api', 'my/index, 'course']; if(nextRoute.indexOf(to.name) >= 0){ //可以在这里面判断是否登录了 if (!store.state.auth.IsLogin) { vueRouter.push({name: 'logi

vue之路由导航守卫-全局前置守卫

一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 参数: to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子.执行效

VUE—路由(四)导航守卫&动态路由

1.在个人中心中做个表单,当表单中有内容时,跳转到其他页面做个提醒 除了beforeRouteLeave在组件中还有其他路由函数,统称导航守卫 2.当从个人中心跳到学术讨论的时候,学术讨论页面也知道跳转进来了,这个函数叫beforeRouteEnter 原文地址:https://www.cnblogs.com/tianya-guoke/p/11509461.html