zoukankan      html  css  js  c++  java
  • vue-router路由复用后页面没有刷新

    vue-router提供了页面路由功能,可以用来构建单页面应用,在使用vue-router的动态路由匹配的时候,遇到了url变化了,但是页面却没有任何动静的问题,记录一下。

    动态路由匹配url变化了,但是组件没有变化是因为vue进行了组件复用,因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。所以我们需要手动进行数据刷新。

    一、使用watch来监听当前的路由变化,从而实现数据刷新。

    import { watch } from "vue";
    import router from "./router";

    export default {
    setup() {
    // vue2
    // watch: {
    // $route(to, from) {
    // // 对路由变化作出响应...
    // }
    // }

    // vue3
    watch(router.currentRoute, () => {
    console.log("路由发生了变化");
    });
    }
    };

    也可以使用2.2中新加的beforeRouteUpdate路由守卫:

    export default {
    setup() {

    },
    beforeRouteUpdate((to, from, next) => {
    // 不要在这里调用next
    // 通过to来判断是否重载数据
    console.log("路由发生了变化");
    }),
    }

    以上就是vue3中使用vue-router-next来处理动态路由变化导致页面不刷新的方法。

    二、在layout.vue,给路由增加时间时间戳。

    <div class="main-box">
          <transition name="fade" mode="out-in">
            <router-view :key="new Date().getTime()"></router-view>
          </transition>
        </div>

    了解更多

  • 相关阅读:
    Linux 安装Zookeeper<集群版>(使用Mac远程访问)
    04寻找两个数组的中位数
    28实现strSTR()
    125验证回文串
    124,二叉树中的最大路径和
    123买卖股票的最佳时机III
    02爬取豆瓣最受欢迎的250部电影
    01爬取当当网500本五星好评书籍
    112买卖股票的最佳时机II
    121.买卖股票的最佳时机
  • 原文地址:https://www.cnblogs.com/guwufeiyang/p/13181678.html
Copyright © 2011-2022 走看看