vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-router切换组件使组件不销毁

使用vue-router切换组件时使组件不销毁问题

作者:龙易安

这篇文章主要介绍了使用vue-router切换组件时使组件不销毁问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue-router切换组件时使组件不销毁

默认地,使用vue-router切换组件时,离开的组件会被销毁,新进入地组件会创建。

那么,有时候,我们希望离开的组件不要被销毁。这时就需要使用到keep-alive标签来缓存组件。

1、用keep-alive包裹router-view

在router-view标签外包裹keep-alive

使用v-if来判断一下,否则所有的组件都会销毁或者不销毁。判断的条件来自于路由定义时的meta字段

 <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

2、定义路由meta字段

如下,DAC_module路径下,有meta字段,且keepAlive的值是true,那么这个路径的路由就会在路由切换时不销毁组件。

而ADC_module路由就会在切换时销毁组件。

{
          path:'/DAC_module',
          component:() => import(/* webpackChunkName: "DacModule" */ '../components/DacModule/DacModule.vue'),
          meta:{ keepAlive: true}
        },
        {
          path:'/ADC_module',
          component:() => import(/* webpackChunkName: "AdcModule" */ '../components/AdcModule/AdcModule.vue'),
        },

3、keep-alive的原理

在created的时候,将需要缓存的vnode节点放到cache中,在render的时候,根据name取出。 

vue-router路由切换 组件重用挖下的坑

问题描述

vue-router导航切换 时,如果两个路由都渲染同个组件,组件会重(chong)用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新

翻车现场再现

这是我的/router/index.js  的内容节选

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main
    },
    {
      path: '/get',
      component: Main
    }
  ]
})

这是我的 Main.vue的内容节选

<p>{{$router.currentRoute.path}}</p>

以上情景很明显 ,我是想要显示路由跳转前和路由跳转后的 path值

路由从 /main  跳转到了 /get  ,理想情况是 网页中显示的路由从  /main 变成了  /get 

但事实是网页没有一点变化  ,显示的内容依然是 /main

车祸原因分析

从我的车况来看,  我的这次路由跳转前后使用了完全相同的组件 ,通过仔细查看vue-router文档对应位置 ,发现了如下关键内容

当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。

route object 是 immutable(不可变) 的,每次成功的导航后都会产生一个新的对象。

这两个关键的信息 表明,正常组件不复用时,组件内的 route对象是最新路由 对应的, 但是组件复用时,由于组件的生命周期钩子不会再被调用,组件内的route对象还是原来的,不会得到更新,所以出现了页面的path 信息 跳转前后没有变化

前往救援

原因分析清楚了,开始解决吧,还好vue-router提供了解决的api 如下

使用 2.2 中引入的 beforeRouteUpdate 守卫:

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

修改完后的Main.vue如下

data () {
    return {
      path:this.$router.currentRoute.path;
    }
}
beforeRouteUpdate (to, from, next) {
    path = this.$router.currentRoute.path;
}

结果 救援现场再次翻车 

页面上的 path依旧没有变化

又再次分析原因,查看 vue-router文档对应位置 ,发现重要内容如下

beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },

上面说的是

/foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,

我的是 从/main 调到/get ,并不符合上面的情况,活该翻车

一次真的救援

data () {
    return {
      path:this.$router.currentRoute.path;
    }
}
watch: {
      '$route' (to, from) {
        this.path = this.$router.currentRoute.path 
      }
}

这次真的救援成功了,页面的 path从 /main 变成了 /get   

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

您可能感兴趣的文章:
阅读全文