溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我們都知道 vue-router 的動態路由匹配 對組件是原地復用的策略，需要我們在組件中根據不同的 $route 參數展示不同的數據，這在大部分情景下是很高效的做法，但這無疑增加了組件的復雜度，而且不同參數間切換因為是同組件復用，切換效果不加修飾的話會顯得很生硬，這里放一張圖片感受一下。
如果我們希望能夠每個動態參數都能渲染出一個組件而不是去復用怎么辦呢？
我這里提供一個簡便的方案
通常動態路由我們都是用來處理詳情頁
const router = new VueRouter({
routes: [
// 動態路徑參數 以冒號開頭
{ 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>
我們可以發現基本上這樣的組件是圍繞著 路徑參數 即例子中的 id 做處理和渲染，只要我們能提取到這個 路徑參數 ，并維護成列表，通過這個列表來渲染實際組件，然后通過 v-show 顯示當前 路徑參數 下的組件，就可以實現不同參數不同組件的效果了。
簡單的來個例子
<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 }
現在我們完成解耦，同路由組件間參數轉變切換的是真實組件了，這里再放一張圖片感受一下。
這個方案說明白了很簡單，但還是有一些細節要注意處理，比如記錄不同參數頁面的滾動條高度，比如怎么處理子頁面關閉等等，我的開源項目 e-admin 提供的 ea-view 組件對這個解決方案做了完整的細節處理，有興趣的話可以參考一下ea-view 。
我正在造一個基于 element-ui 的中后臺框架輪子e-admin 歡迎star
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
