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

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

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

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

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

我這里提供一個簡便的方案

通常動態(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 顯示當前 路徑參數(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)變切換的是真實組件了，這里再放一張圖片感受一下。

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

深入淺析vue-cli@3.0 使用及配置說明
這篇文章主要介紹了vue-cli@3.0 使用及配置說明,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-05-05
vue項目input標簽checkbox,change和click綁定事件的區(qū)別說明
這篇文章主要介紹了vue項目input標簽checkbox,change和click綁定事件的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue如何獲取自定義元素屬性參數(shù)值的方法
這篇文章主要介紹了vue如何獲取自定義元素屬性參數(shù)值的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
Vue3中v-model語法糖的三種寫法詳解
這篇文章主要為大家詳細介紹了Vue3中v-model語法糖的三種寫法,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學習一下
2024-01-01
vue全局指令文件?directives詳解
全局指令是Vue.js中的一種自定義指令,可以在整個應用中重復使用,通過Vue.directive方法定義,可以在組件內(nèi)部直接使用,指令有多個生命周期鉤子,可以接收參數(shù)和修飾符,提高代碼復用性和可維護性,本文介紹vue全局指令文件directives,感興趣的朋友一起看看吧
2025-02-02
vue 彈窗時監(jiān)聽手機返回鍵關閉彈窗功能(頁面不跳轉(zhuǎn))
這篇文章主要介紹了vue 彈窗時監(jiān)聽手機返回鍵關閉彈窗功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值(頁面不跳轉(zhuǎn)) ,需要的朋友可以參考下
2019-05-05
vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法
本篇文章主要介紹了vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
Vue項目優(yōu)化打包之前端必備加分項
相信現(xiàn)在很多人都是用Vue做過了各種項目,但是項目代碼做完和上線并不代表這結(jié)束,還有上線以后的優(yōu)化也是很重要的一點,這篇文章主要給大家介紹了關于Vue項目優(yōu)化打包的相關資料,需要的朋友可以參考下
2021-09-09
vue2.x 通過后端接口代理,獲取qq音樂api的數(shù)據(jù)示例
今天小編就為大家分享一篇vue2.x 通過后端接口代理,獲取qq音樂api的數(shù)據(jù)示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
使用Vue-scroller頁面input框不能觸發(fā)滑動的問題及解決方法
這篇文章主要介紹了使用Vue-scroller頁面input框不能觸發(fā)滑動的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-08-08