同一动态路由之间跳转时页面数据不更新的问题

问题描述

在 Vue 中有时我们会使用到动态路由。具体如下

路由定义如下

  {
    path: "/children/:id",
    name: "children",
    component: () => import("../views/children.vue")
  }

在 children 组件中我们可以通过 $route.params.id 获取到对应动态路由的参数，获取到参数后通常会在组件中使用该参数，这时候就可能会出现问题。

当我们在使用时是直接获取 $route.params.id 的值来进行展示，那么就不会出现问题。

<template>
  <div>
    <p>children 组件的 id 为：{{ $route.params.id }}</p>
  </div>
</template>

但是如果是将 $route.params.id 的值赋值给一个变量，然后使用这个变量去展示的话，就会出现一个问题。

<template>
  <div>
    <p>children 组件的 id 为：{{ id }}</p>
  </div>
</template>

 data() {
    return {
      id: this.$route.params.id
    }
  },

那就是在同一动态路由之间进行切换时，由于路由没有发生改变，组件也就不会重新渲染，因此 id 的值也就不会改变，但此时路由参数已经发生改变。

解决方案

1. 在组件中通过监听器对路由对象进行监听，然后对变量进行重新赋值。

  data() {
    return {
      id: this.$route.params.id
    }
  },
  // 监听路由对象
  watch: {
    $route(to, from) {
      this.id = to.params.id
    }
  }

2. 在组件中使用导航守卫 beforeRouteUpdate 来对变量进行重新赋值。

  data() {
    return {
      id: this.$route.params.id
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.id = to.params.id
    next()
  },

3. 使用路由传参 props

在定义路由时通过设置 props的值为 true 来开启路由传参

{
    path: "/children/:id",
    name: "children",
    component: () => import("../views/children.vue"),
    props: true
  },

在组件中可以通过 props 来接收参数

props: ['id']  // 属性名要与动态参数名一致

这个时候就可以在组件中直接使用

<template>
  <div>
    <p>children 组件的 id 为：{{ id }}</p>
  </div>
</template>