哲神最近在做VUE开发,开发一个模块需要用到嵌套路由,路由如下:

{
  path: 'dashboard',
  component: () => import('@/views/dashboard/index'),
  name: 'dashboard',
  meta: { title: '数据看板', activeMenuName: 'dashboard', keepAlive: true },
  children: [{
    path: ':dashboardId',
    component: () => import('@/views/dashboard/detail'),
    name: 'dashboard_detail',
    meta: { title: '数据看板详情', activeMenuName: 'dashboard' }
  }]
}

页面如下:
在这里插入图片描述

我每次点击左侧树形控件,调用下面这个方法进行路由的切换

this.$router.push({ name: 'dashboard_detail', params: { dashboardId: id } })

然后出现了一个意料之外的问题,VUE总是会把dashboard组件重新加载一遍,导致每次点击树形控件都要重新获取数据,使得树形控件“闪闪发光”。
一级的router-view代码如下:

      <keep-alive>
        <router-view :key="key"/>
      </keep-alive>
      
       computed: {
	    key () {
	      return this.$route.path
	    }
	  }

二级router-view在dashboard组件里,代码如下:

    <div id="right-chart">
      <keep-alive>
        <router-view :key="detailRouterKey"/>
      </keep-alive>
    </div>

然后我真的是百思不得其解。按照VUE官方文档的说法:
在这里插入图片描述
dashboard应该被复用的,不应该重新加载。可之前已经被vue的keep-alive和watch的组合BUG坑过一次了:https://segmentfault.com/q/1010000016167912/。因此这次我也选择了不相信VUE,并去网上找到了和我类似的情况:https://segmentfault.com/q/1010000018052821/a-1020000018054700。然后秉持着对VUE BUG“无药可救”的态度,我对路由、对架构进行了一次又一次的思考、整改~~~最终劳而无功。

但是最后,真理的发现权果然都属于那些敢于伟大尝试(瞎B乱改)的人。我把一级router-view的key值从path改成了activeMenuName:

    <keep-alive>
       <router-view :key="key"/>
    </keep-alive>
    
	computed: {
		key () {
			// return this.$route.path
			return this.$route.activeMenuName
		}
	}

然后就OK了。。。。。。。
所以结论是:router-view的key的唯一性会导致“根据参数动态渲染路由”时无法复用组件。想要复用某组件,就保证router-view里按需赋予它该有的key。

Logo

前往低代码交流专区

更多推荐