vue-router切换路由组件重用

朴灿烈づ我的快乐病毒、 2022-09-12 01:44 208阅读 0赞

**问题：**vue-router导航切换 时，如果两个路由都渲染同个组件，

组件的生命周期方法（created或者mounted）不会再被调用, 组件会被重用，显示上一个路由渲染出来的自建

**解决方案：**可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化。

修改 src/views/layout/components/AppMain.vue 文件如下：

<template>
      <section class="app-main">
        <transition name="fade-transform"
                    mode="out-in">
          
          <router-view :key="key"></router-view>
        </transition>
      </section>
    </template>
    
    <script>
    export default {
      name: 'AppMain',
      computed: {
        key () {
          return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
        }
      }
    }
    </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqq5Yqb5aWL5paXR08_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqq5Yqb5aWL5paXR08_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/ebcd0b5772034b84bbb46538934105c3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，208人围观）

还没有评论，来说两句吧...

相关阅读

相关 VueRouter路由嵌套

1. 前言本小节我们介绍如何嵌套使用 VueRouter。嵌套路由在日常的开发中非常常见，如何定义和使用嵌套路由是本节的重点。同学们在学完本节课程之后需要自己多尝试配置

怼烎@/ 2024年03月30日 18:02/ 0 赞/ 147 阅读

相关 VueRouter路由传参

1. 前言本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

Myth丶恋晨/ 2024年03月27日 08:47/ 0 赞/ 145 阅读

相关 vue命名路由组件

1、作用：简化路由的跳转 2、如何使用 1.给路由命名: { path : ' / demo', component : Demo,

柔光的暖阳◎/ 2023年10月02日 22:24/ 0 赞/ 40 阅读

相关 Vuerouter路由

1. 前/后端路由 1. 后端路由 1. 一个url（uniform resource location）对应一个页面 2. 在页面地址跳转时，后台会根据url

梦里梦外;/ 2023年03月04日 09:17/ 0 赞/ 50 阅读

相关 Vue 多组件路由

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

约定不等于承诺〃/ 2022年12月21日 04:54/ 0 赞/ 242 阅读

相关 vue-router切换路由组件重用

问题：vue-router导航切换时，如果两个路由都渲染同个组件，组件的生命周期方法（created或者mounted）不会再被调用, 组件会被重用，显示上一个路由渲染出

朴灿烈づ我的快乐病毒、/ 2022年09月12日 01:44/ 0 赞/ 209 阅读

相关路由-标签切换

效果： ![Center][] 依赖： <link href="https://cdn.bootcss.com/ionic/1

青旅半醒/ 2022年06月07日 11:49/ 0 赞/ 221 阅读

相关 vue2路由组件切换动画

[参考文章][Link 1] 1.在路由对象的原型中添加一个方法和一个属性 Router.prototype.goBack = function () {

快来打我*/ 2022年05月31日 01:40/ 0 赞/ 506 阅读

相关 RouteComponent 路由组件

route component（路由组件）指的是一个直接被 [route（路由）][route]（例如 `<Route component>`）渲染出的 [co

水深无声/ 2022年04月01日 04:57/ 0 赞/ 853 阅读

相关 react 在非路由组件中使用路由组件的api

如使用:this.props.history、this.props.location、this.props.match等 1、引入 impo

曾经终败给现在/ 2021年07月24日 17:26/ 0 赞/ 388 阅读