我們都知道 vue-router 的動態(tài)路由匹配 對組件是原地復(fù)用的策略番宁，需要我們在組件中根據(jù)不同的$route參數(shù)展示不同的數(shù)據(jù)竹祷，這在大部分情景下是很高效的做法蝇率，但這無疑增加了組件的復(fù)雜度所踊，而且不同參數(shù)間切換因為是同組件復(fù)用删铃，切換效果不加修飾的話會顯得很生硬，這里放一張圖片感受一下攒射。
SingleView
如果我們希望能夠每個動態(tài)參數(shù)都能渲染出一個組件而不是去復(fù)用怎么辦呢醋旦？
我這里提供一個簡便的方案
通常動態(tài)路由我們都是用來處理詳情頁
const router = new VueRouter({
routes: [
// 動態(tài)路徑參數(shù) 以冒號開頭
{ path: '/user/:id', component: User, props: true }
]
})
User.vue
<template>
<div>{{ user.name }}</div>
</template>
<script>
export default {
name: 'User',
props: ['id'],
data() {
return {data: {}};
},
watch: {
id(id) {
this.getUser(id);
},
},
computed: {
user() {
return this.data[this.id] || {name: ''};
},
},
methods: {
getUser(id) {
setTimeout(() => { // 假裝異步
this.data[id] = {id, name: '張' + id};
}, 1000);
},
},
mounted() {
this.getUser(this.id);
},
};
</script>
我們可以發(fā)現(xiàn)基本上這樣的組件是圍繞著 路徑參數(shù) 即例子中的id做處理和渲染，只要我們能提取到這個路徑參數(shù)会放，并維護成列表饲齐，通過這個列表來渲染實際組件，然后通過v-show顯示當(dāng)前路徑參數(shù)下的組件咧最，就可以實現(xiàn)不同參數(shù)不同組件的效果了捂人。
簡單的來個例子
<template>
<div>
<user
v-for="_id in idList"
v-show="_id === id"
:id="_id"
:key="_id"
/>
</div>
</template>
<script>
import User from './User.vue';
export default {
name: 'UserPage',
components: {
User,
},
props: ['id'],
data() {
return {
idList: [this.id],
};
},
watch: {
id(id) {
if (!this.idList.includes(id)) this.idList.push(id);
},
},
};
</script>
然后把這個組件作為router組件
{ path: '/user/:id', component: UserPage, props: true }
現(xiàn)在我們完成解耦，同路由組件間參數(shù)轉(zhuǎn)變切換的是真實組件了矢沿，這里再放一張圖片感受一下滥搭。
MultiViewf
這個方案說明白了很簡單，但還是有一些細(xì)節(jié)要注意處理捣鲸，比如記錄不同參數(shù)頁面的滾動條高度瑟匆，比如怎么處理子頁面關(guān)閉等等，我的開源項目
e-admin提供的ea-view組件對這個解決方案做了完整的細(xì)節(jié)處理栽惶，有興趣的話可以參考一下 ea-view愁溜。我正在造一個基于
element-ui的中后臺框架輪子 e-admin 歡迎star
