詳解vue-router 動態(tài)路由下子頁面多頁共活的解決方案

發(fā)布時間：2020-08-22 16:08:24 來源：腳本之家閱讀：300 作者：asseek 欄目：web開發(fā)

我們都知道 vue-router 的動態(tài)路由匹配對組件是原地復(fù)用的策略，需要我們在組件中根據(jù)不同的 $route 參數(shù)展示不同的數(shù)據(jù)，這在大部分情景下是很高效的做法，但這無疑增加了組件的復(fù)雜度，而且不同參數(shù)間切換因為是同組件復(fù)用，切換效果不加修飾的話會顯得很生硬，這里放一張圖片感受一下。

如果我們希望能夠每個動態(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ù) ，并維護(hù)成列表，通過這個列表來渲染實際組件，然后通過 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)變切換的是真實組件了，這里再放一張圖片感受一下。

詳解vue-router 動態(tài)路由下子頁面多頁共活的解決方案

這個方案說明白了很簡單，但還是有一些細(xì)節(jié)要注意處理，比如記錄不同參數(shù)頁面的滾動條高度，比如怎么處理子頁面關(guān)閉等等，我的開源項目 e-admin 提供的 ea-view 組件對這個解決方案做了完整的細(xì)節(jié)處理，有興趣的話可以參考一下ea-view 。

我正在造一個基于 element-ui 的中后臺框架輪子e-admin 歡迎star

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

詳解vue-router 動態(tài)路由下子頁面多頁共活的解決方案

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽