vue中修改router定義的name值

在創建 Router 實例的時候，在 routes 配置中已經給路由設置名稱（https://router.vuejs.org/zh/guide/essentials/named-routes.html），同時頁面中也會針對該視圖進行命名（https://vue.docschina.org/v2/api/#name）
當我們使用vue的頁面緩存機制的時候就可能會出現一個問題，路由定義的name和視圖的name不一致，這種情況下就會出現緩存失效的問題，本篇文章就來介紹如何解決該問題。

1.如果是單頁面緩存，當然最簡單的方法就是修改兩個name值保持統一

2.特殊情況，例如A,B,C三個路由跳轉同時指向一個視圖頁面，如圖

 

 

 三個列表中對應的頁面相同，可能只是權限查看不同，這時我們當然是用多個跳轉路由對應一個頁面比較方便

1.統一修改視圖命名為路由命名

import List from '@/views/list'
import Vue from 'vue'

export default (name) => {
  const component = Vue.extend({ ...List, name })
  return component
}

2.在router中調用

import CusBackListFn from '@/views/list.js'
import Layout from '@/views/layout/Layout'
   const Customer = {
    　　path: '/customer',
    　　component: Layout,
    　　name: 'Customer',
    　　redirect: 'noredirect',
    　　meta: { title: '管理平台', icon: 'el-icon-present'},
    　　children: [
  　　　　{
       　　path: 'list1',
       　　name: 'list1',
       　　component: CusBackListFn('list1'),
       　　meta: { title: '客服列表', icon: 'el-icon-collection'},
     　　},
     　　{
      　　 path: 'list2',
      　　 name: 'list2',
       　　component: CusBackListFn('list2'),
       　　meta: { title: '測試列表', icon: 'el-icon-collection'}
     　　},
     　　{
      　　path: 'list3',
       　　name: 'list3',
       　　component: CusBackListFn('list3'),
      　　 meta: { title: '前端列表', icon: 'el-icon-set-up' }
     　　},
 　　]
 }
export default Customer