vue动态路由防止页面自跳转思路

最新推荐文章于 2024-09-02 20:19:57 发布

STZ程序猿

最新推荐文章于 2024-09-02 20:19:57 发布

阅读量164

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43243652/article/details/140750020

版权

1.在跳转时加入判断

    goToUser(id) {
      if(this.$route.path !== '/user/'+id) {
        this.$router.push({ name: 'User', params: { id: id } });
      }
    },

这个方法的原本作用是跳转到User页面，并附带路由参数

加入判断后，防止自跳转

2.使用watch监控

watch: {
    '$route.params.id'(newValue, oldValue) {
      // 这里 newValue 是新的路由参数值，oldValue 是旧的路由参数值（Vue Router 3.x）
      // Vue Router 4.x 则直接获得 newValue
      // 在这里调用你想要在子页面切换时触发的方法
      if(newValue !== oldValue) {
        const userId = this.$route.params.id;
      }
    }
  },