vue中修改router定義的name值
阿新 • • 發佈:2021-10-09
在建立 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