Vue路由切换页面不更新问题解决方案

当使用Vue.js进行单页应用开发时，我们经常会使用Vue Router来实现路由切换。但是，有时候在切换路由时，页面并没有更新，这很可能是因为使用了相同的组件。下面是解决这个问题的完整攻略：

问题描述

使用Vue Router切换页面时，发现页面没有更新，但是路由确实已经切换了。我们在页面中进行各种操作，也不会触发重新渲染组件的过程。

分析问题

这个问题通常出现在我们使用相同组件来处理不同路由的情况下。因为Vue在判断是否需要重新渲染组件时，会通过对比组件实例的变量来判断是否需要重新渲染。而在这种情况下，路由切换的时候，相同的组件实例如果被复用了，那么组件的变量不会发生变化，从而导致页面不会重新渲染。

解决方案

解决这个问题的方法有很多，下面列出两种常见的解决方案。

方案一：使用唯一的key值

在Vue中，可以通过给组件的key属性赋值来确保每个组件实例的不同。这样做可以强制Vue创建一个新的组件实例，从而确保页面会重新渲染。例如：

<template>
  <div>
    <router-link to="/page1">Page1</router-link>
    <router-link to="/page2">Page2</router-link>
    <router-view :key="$route.fullPath" />
  </div>
</template>

在这个例子中，我们将$route.fullPath设置为了组件的key值。这将确保每次切换路由时，都会创建一个新的组件实例。

方案二：使用不同的组件名称

另一种解决方案是使用不同的组件名称来确保每个路由使用不同的组件实例。例如：

const router = new VueRouter({
  routes: [
    { path: '/page1', component: Page1 },
    { path: '/page2', component: Page2 },
  ]
})

const app = new Vue({
  router,
  components: {
    Page1,
    Page2
  }
}).$mount('#app')

在这个例子中，我们为每个路由使用了不同的组件名称，从而确保每个路由使用不同的组件实例。

示例说明

示例一

假设我们有一个应用程序，其中有两个页面，分别为“用户列表”和“用户详情”。我们需要使用同一个组件VueComponent来显示这两个页面的内容。

<template>
  <div>
    <router-link to="/user/list">用户列表</router-link>
    <router-link to="/user/detail/1">用户详情</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import VueComponent from '@/components/VueComponent.vue'

export default {
  components: {
    VueComponent,
  },
}
</script>

在这个例子中，我们使用了同一个VueComponent组件来显示“用户列表”和“用户详情”两个页面的内容。但是，当我们切换到“用户详情”页面时，页面并没有更新，仍然显示的是“用户列表”的内容。

为了解决这个问题，我们可以为组件实例设置一个唯一的key值，以确保组件每次都会重新渲染。

<router-view :key="$route.fullPath"></router-view>

这里我们使用了$route.fullPath作为组件的唯一key值。

示例二

假设我们有一个应用程序，其中有两个页面，分别为“交易列表”和“交易详情”。我们需要使用同一个组件Transaction来显示这两个页面的内容。

<template>
  <div>
    <router-link to="/transaction/list">交易列表</router-link>
    <router-link to="/transaction/detail/1">交易详情</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Transaction from '@/components/Transaction.vue'

export default {
  components: {
    Transaction,
  },
}
</script>

在这个例子中，我们依然使用了同一个Transaction组件来显示“交易列表”和“交易详情”两个页面的内容。但是，当我们切换到“交易详情”页面时，页面并没有更新，仍然显示的是“交易列表”的内容。

为了解决这个问题，我们可以为每个路由使用不同的组件，以确保每个路由使用不同的组件实例。

const router = new VueRouter({
  routes: [
    { path: '/transaction/list', component: TransactionList },
    { path: '/transaction/detail/:id', component: TransactionDetail },
  ]
})

const app = new Vue({
  router,
  components: {
    TransactionList,
    TransactionDetail,
  }
}).$mount('#app')

在这个例子中，我们为每个路由使用了不同的组件名称，TransactionList和TransactionDetail，从而确保每个路由使用不同的组件实例。因此，当我们切换到“交易详情”页面时，页面会重新渲染，并显示正确的内容。