快捷導(dǎo)航

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

更新時(shí)間：2019年12月22日 08:38:06 作者：asseek

這篇文章主要介紹了vue-router 動(dòng)態(tài)路由下子頁(yè)面多頁(yè)共活的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

如果我們希望能夠每個(gè)動(dòng)態(tài)參數(shù)都能渲染出一個(gè)組件而不是去復(fù)用怎么辦呢？

我這里提供一個(gè)簡(jiǎn)便的方案

通常動(dòng)態(tài)路由我們都是用來(lái)處理詳情頁(yè)

const router = new VueRouter({
 routes: [
  // 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開(kāi)頭
  { 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 做處理和渲染，只要我們能提取到這個(gè) 路徑參數(shù) ，并維護(hù)成列表，通過(guò)這個(gè)列表來(lái)渲染實(shí)際組件，然后通過(guò) v-show 顯示當(dāng)前 路徑參數(shù) 下的組件，就可以實(shí)現(xiàn)不同參數(shù)不同組件的效果了。

簡(jiǎn)單的來(lái)個(gè)例子

<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>

然后把這個(gè)組件作為 router 組件

{ path: '/user/:id', component: UserPage, props: true }

現(xiàn)在我們完成解耦，同路由組件間參數(shù)轉(zhuǎn)變切換的是真實(shí)組件了，這里再放一張圖片感受一下。

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

我正在造一個(gè)基于 element-ui 的中后臺(tái)框架輪子e-admin 歡迎star

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: