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

姜来前端程序媛

已于 2024-11-05 09:29:42 修改

阅读量1.5w

点赞数 25

文章标签： vue.js javascript 前端

于 2023-12-13 16:45:53 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_74285634/article/details/134976181

版权

在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路由发生了跳转但是界面没有任何反应问题。

方案二：使用 watch 监听路由变化，手动更新数据

前两种方法如果遇到页面有侧边栏，会出现侧边栏再次渲染情况，所以使用watch来监听路由变化，然后手动更新数据。

watch: {
    $route: function (to, from) {
      this.getList();
    },
  },