vue router 导航守卫的应用（当前页面路由参数发生改变）

在当前页面实现 路由 跳转 有两种方式：

一种是 使用 router-link

<router-link :to="{ name: 'abouts', query: { myTab: 2 } }">
                    联系我们
</router-link>

还有一种 ：通过方法的形式

给页面中的元素 绑定事件 比如 ：

<div
            class="col-lg-4 m-15px-tb"
            v-for="(item, i) in solutionList"
            :key="i"
            @click="goSolution(item.id)"
          >

对应的js 代码为

  goSolution(id) {
      this.$router.push({ name: "solutiondetails", query: { solutionId:id} });
    },

然后，跳转页面的路由就会发生变化为类似于这种形式的

处理

在被跳转页面 需要进行的处理 ：
1、根据传过来的id，向后台请求对应的数据
获取 传过来的id：

this.$route.query.solutionId[这是对应的字段名] 
在 create 和active 中需要给data中的id赋值
如：
activated() {
    let newsId = this.$route.query.news
    this.news_id = newsId  //更新data中的id
    
    this.getNewsDetail()  //该方法为封装的接口请求数据
    // 获取往期推荐
    this.getNews()
    // this.getMd()
  },

只设置activater 是不能实现组件的刷新的，能实现组件的更改。
那么就到了下边这个问题 ，使用导航守卫
2、右侧有显示别的信息，当点击该信息时显示对应的内容

// 监听组件路由变化
  beforeRouteUpdate(to, from, next) {
    this.news_id = to.query.news
    this.getNewsDetail()  //重置id，重新发送请求
    next()
  },

使用导航守卫，可以监听路由变化，然后，将发生变化的id 重新设置，最后，根据id 重新拉请求
最终就实现了该效果 点击 右侧 往期推荐前：

点击往期推荐后

路由中 articals 发生了改变，且内容也随之发生了改变

最后

以上就是无辜小丸子为你收集整理的vue router 导航守卫的应用（当前页面路由参数发生改变）的全部内容，希望文章能够帮你解决vue router 导航守卫的应用（当前页面路由参数发生改变）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。