解决vue路由发生了跳转但是界面没有任何反应问题

在vue中，我们使用路由（Router）来实现页面的跳转。但是有时候我们会遇到这样一种问题：点击页面中的导航链接，路由发生了跳转，但是网页的界面没有任何变化。这是什么原因呢？

这通常是因为我们的路由跳转没有更新对应的视图（View）导致的。那么如何解决这个问题呢？下面，我将为大家介绍两种解决方案。

方案一：使用标签

我们可以在App.vue文件中使用vue提供的标签，来保留动态组件的状态，从而避免了因路由跳转而导致的页面界面没有更新的问题。该标签的子组件只有在它们失活（没有被渲染）时才会被销毁。

示例代码如下：

<template>
  <div id="app">
    <!-- 应用程序导航栏  -->
    <nav>...</nav>

    <!-- 动态的子视图 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

在“子视图”中，我们将标签放在了标签中，这样就可以保留动态组件的状态了。

方案二：在路由跳转时手动更新视图

我们可以在路由跳转时，手动更新对应的视图。我们可以在Vue实例中监听$route变化事件，并在事件回调函数中更新视图。

示例代码如下：

<template>
  <div id="app">
    <!-- 应用程序导航栏 -->
    <nav>...</nav>

    <!-- 动态的子视图 -->
    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>

在“子视图”中，我们使用了$route对象的fullPath属性作为了的key值。

这样，每当$route变化时，就会重新渲染。

上述两种方法，都可以解决vue路由发生了跳转但是界面没有任何反应问题。