vue 解决路由只变化参数页面组件不更新问题

下面就来详细讲解vue解决路由只变化参数页面组件不更新问题的攻略：

问题背景

在使用vue开发过程中，我们经常会用到vue-router，通过改变路由的参数实现动态更新页面内容。但是有时候我们会发现，虽然路由参数变化了，但页面并没有随之更新，这是为什么呢？

这是因为vue-router默认情况下只会改变路由参数，而不会强制重新渲染组件。如果要解决这个问题，我们需要对vue-router进行配置。

解决方案

要解决这个问题，我们需要使用vue-router提供的watch机制来实现。

首先，在我们的路由配置中，需要手动加上watchQuery属性，来监听路由参数的变化：

const router = new VueRouter({
  routes: [...],
  watchQuery: true
})

设置了watchQuery属性以后，我们就可以在组件中使用它了。需要注意的是，我们需要在组件中定义一个名为$route的计算属性，来获取路由参数的变化：

export default {
  computed: {
    $route () {
      return this.$router.currentRoute
    }
  },
  watch: {
    '$route.params': {
      handler () {
        // 路由参数变化后的处理逻辑
        // 例如重新获取数据等
      },
      deep: true
    }
  }
}

这里使用了deep选项，使得watch可以递归监听对象中的属性变化。

另外需要注意的是，我们在handler回调函数中可以执行重新获取数据等操作。

示例说明

下面通过两个示例说明：

示例一

假设我们有一个列表页，根据不同的路由参数展示不同的列表数据。我们在路由参数发生变化时需要重新获取数据并渲染页面。

首先我们需要在路由配置中开启watchQuery属性。代码如下：

const router = new VueRouter({
  routes: [
    {
      path: '/list/:type',
      component: List
    }
  ],
  watchQuery: true
})

接下来在组件中定义一个名为$route的计算属性，并在watch选项中监听$route.params对象的变化。代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  computed: {
    $route() {
      return this.$router.currentRoute;
    }
  },
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.getList();
  },
  watch: {
    '$route.params': {
      handler() {
        this.getList();
      },
      deep: true
    }
  },
  methods: {
    async getList() {
      const type = this.$route.params.type;
      const res = await fetch(`/api/list?type=${type}`);
      this.list = await res.json();
    }
  }
};
</script>

在上述代码中，我们在getList方法中根据路由参数重新获取数据，然后更新list数据，从而重新渲染页面。

示例二

假设我们有一个详情页，需要根据路由参数动态展示不同的详情数据。我们在路由参数发生变化时需要重新获取数据并渲染页面。

首先我们需要在路由配置中开启watchQuery属性。代码如下：

const router = new VueRouter({
  routes: [
    {
      path: '/detail/:id',
      component: Detail
    }
  ],
  watchQuery: true
})

接下来在组件中定义一个名为$route的计算属性，并在watch选项中监听$route.params对象的变化。代码如下：

<template>
  <div>
    <h2>{{ detail.title }}</h2>
    <p>{{ detail.content }}</p>
  </div>
</template>
<script>
export default {
  computed: {
    $route() {
      return this.$router.currentRoute;
    }
  },
  data() {
    return {
      detail: {}
    };
  },
  mounted() {
    this.getDetail();
  },
  watch: {
    '$route.params': {
      handler() {
        this.getDetail();
      },
      deep: true
    }
  },
  methods: {
    async getDetail() {
      const id = this.$route.params.id;
      const res = await fetch(`/api/detail?id=${id}`);
      this.detail = await res.json();
    }
  }
};
</script>

在上述代码中，我们在getDetail方法中根据路由参数重新获取数据，然后更新detail数据，从而重新渲染页面。

到这里我们就通过两个示例完整讲解了vue解决路由只变化参数页面组件不更新问题的攻略。