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

最新推荐文章于 2025-05-14 08:00:00 发布

原创最新推荐文章于 2025-05-14 08:00:00 发布 · 440 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文探讨了Vue中路由push方法的重写技巧，以解决相同路由跳转时的错误，并介绍了如何通过添加随机参数触发watch。同时，深入讲解了全局前置守卫的应用，确保特定路由访问前进行权限检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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