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

125 阅读 0 评论 83 点赞

我是靠谱客的博主无辜小丸子，这篇文章主要介绍vue router 导航守卫的应用（当前页面路由参数发生改变），现在分享给大家，希望可以做个参考。

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

一种是使用 router-link

复制代码

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

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

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

复制代码

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

对应的js 代码为

复制代码

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

然后，跳转页面的路由就会发生变化为类似于这种形式的
在这里插入图片描述

处理

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
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、右侧有显示别的信息，当点击该信息时显示对应的内容

复制代码

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