vue 路由导航守卫 全局前置守卫
程序员文章站
2022-03-24 18:17:39
...
var routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function(location, onComplete, onAbort) {
if(typeof location == "string") {
let s = "&"
if(location.indexOf('?') == -1) {
s = "?"
}
location = location + s + "random=" + Math.random()
}
return routerPush.call(this, location).catch(err => err)
}
const router = new VueRouter({
routes
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
var flag = JSON.parse(localStorage.getItem('flag'))
if(to.name == "panda" || to.name == "tiger") {
// console.log(to)
if(!flag) {
next({
name: 'ticket',
query: {
type: to.name
}
})
} else {
// console.log(to.query.type)
if(to.name === to.query.type) {
next()
} else {
// console.log(to)
next({
name: 'ticket',
query: {
type: to.name
}
})
}
}
} else {
next()
}
})
vue重写路由push方法
/**
- 重写路由的push方法
- 解决,相同路由跳转时,报错
- 添加,相同路由跳转时,触发watch (仅限string方式传参,形如"view?id=5")
*/
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
if(typeof(location)=="string"){
var Separator = "&";
if(location.indexOf('?')==-1) { Separator='?'; }
location = location + Separator + "random=" + Math.random();
}
return routerPush.call(this, location).catch(error=> error)
}
上一篇: java算法之选择排序
下一篇: Vue的路由守卫前置和后置
推荐阅读
-
详解vue-router导航守卫
-
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
-
vue-router 实现导航守卫(路由卫士)的实例代码
-
vue2.0路由守卫函数代码实例解析
-
vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )
-
vue-router导航守卫(router.beforeEach())的使用
-
vue2.0 实现导航守卫(路由守卫)
-
vue路由导航守卫和请求拦截以及基于node的token认证的方法
-
Vue的路由动态重定向和导航守卫实例
-
Vue学习之父子组件通讯,Vuex与购物车修改删,导航守卫解决权限路由问题详解