如何解決vuerouter動(dòng)態(tài)路由下讓每個(gè)子路由都是獨(dú)立組件的問題

這篇文章主要介紹如何解決vue router動(dòng)態(tài)路由下讓每個(gè)子路由都是獨(dú)立組件的問題，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營銷的理念，以專業(yè)定制企業(yè)官網(wǎng)，成都網(wǎng)站建設(shè)、成都網(wǎng)站制作，成都小程序開發(fā)，網(wǎng)頁設(shè)計(jì)制作，手機(jī)網(wǎng)站制作設(shè)計(jì)，全網(wǎng)營銷推廣幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級(jí)專業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對(duì)客戶都以感恩的心態(tài)奉獻(xiàn)自己的專業(yè)和所長。

vue-router 之動(dòng)態(tài)路由

vue-router官網(wǎng)上面是這樣說的
// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
然后，我就這樣寫了：
this.$router.push({path:'manage', query: {id: 'tasklist'}})1
結(jié)果很明顯，失敗了。然后我就默默的再次看了一下官網(wǎng)，結(jié)果發(fā)現(xiàn)了這句話
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: 'register', params: { plan: 'private' }})
注意：如果提供了 path，params 會(huì)被忽略，上述例子中的 query 并不屬于這種情況。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有參數(shù)的 path：
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
謹(jǐn)記啊，動(dòng)態(tài)實(shí)現(xiàn)二級(jí)路由，需要先用變量保存二級(jí)路由名稱(let router = 'tasklist')，然后調(diào)用this.$router.push({path: `/user/${router}`}).

下面看下vue router動(dòng)態(tài)路由下讓每個(gè)子路由都是獨(dú)立組件的解決方案

因?yàn)?vue-router 對(duì)嵌套路由采用的是組件復(fù)用策略，這在大部分場景的確是高效的做法，但是如果遇到這種情況：

就是要求多個(gè)子路由共活，并且有頻繁來回切換需求的話，就很希望能讓每個(gè)子路由都是獨(dú)立組件了，雖然可以通過監(jiān)聽路由切換

watch: {
   '$route'(to) {
    if (to.meta.path === '/page/buy-details') {
     this.id = to.params.id;
     this.state()
    }
   }
  },

去實(shí)時(shí)處理更新的數(shù)據(jù)，我之前一直都是這么做的，包括上面那副動(dòng)圖的頁面，但是這真的很麻煩，要讓用戶切換中準(zhǔn)確的回到切換前頁面的顯示狀態(tài)，要考慮的東西太多，于是想出了一個(gè)解決方案：

子路由組件不涉及實(shí)際業(yè)務(wù)代碼，只維護(hù)一個(gè)打開過的id列表，路由切換到這邊時(shí)，判斷id，沒打開過的添加，通過這個(gè)列表循環(huán)出實(shí)際的子路由組件，v-show當(dāng)前id的，這樣就能實(shí)現(xiàn)每個(gè)實(shí)例都是獨(dú)立的了
我按這個(gè)思路寫出一個(gè) mixins

details-page.js

export default {
 watch: {
  '$route'(to, from) {
   this.detailsLeave(from);
   this.detailsOpen(to);
  }
 },
 data() {
  return {
   pagePath: '',
   pageId: 0,
   pages: {}
  }
 },
 methods: {
  /**
   * 子頁面打開觸發(fā)
   * @param route
   */
  detailsOpen(route) {
   if (this.detailsPathGet(route.path) === this.pagePath) {
    if (!this.pages[route.params.id]) {
     this.$set(this.pages, route.params.id, {
      id: route.params.id,
      scrollTop: 0
     })
    }
    //路由打開 跳轉(zhuǎn)滾動(dòng)條
    this.pageId = route.params.id;
    this.$nextTick(()=>{
     this.$parent.$el.firstChild.scrollTop = this.pages[route.params.id].scrollTop;
    });
   }
  },
  /**
   * 路由切換觸發(fā)
   * 判斷離開的路由是否是當(dāng)前頁面，如果是則記錄滾動(dòng)條高度
   * @param route
   */
  detailsLeave(route) {
   if (this.detailsPathGet(route.path) === this.pagePath) {
    if (this.pages[route.params.id]) {
     //記錄滾動(dòng)條高度 此處針對(duì)ea-admin后臺(tái) 不同的框架要記錄的滾動(dòng)條el不同
     this.pages[route.params.id].scrollTop = this.$parent.$el.firstChild.scrollTop ;
    }
   }
  },
  /**
   * 子頁面關(guān)閉函數(shù)
   * @param id
   */
  detailsClose(id) {
   delete this.pages[id]
  },
  /**
   * 取路由不含最后一項(xiàng)參數(shù)的地址
   * @param path
   * @returns {string}
   */
  detailsPathGet(path) {
   const i = path.lastIndexOf('/');
   return path.substr(0, i);
  }
 },
 mounted() {
  //通過當(dāng)前路由地址創(chuàng)建頁面識(shí)別地址 注：只對(duì)path: '/user/:id' 有效 當(dāng) path: /user/:id/profile 失效
  this.pagePath = this.detailsPathGet(this.$route.path);
  //執(zhí)行第一次子頁面打開
  this.detailsOpen(this.$route);
  //監(jiān)聽標(biāo)簽關(guān)閉消息 此處針對(duì)ea-admin后臺(tái) 不同框架監(jiān)聽關(guān)閉方式不同
  this.$tabs.onRemove((page, next) => {
   //收到標(biāo)簽關(guān)閉回調(diào)，判斷關(guān)閉的是否是當(dāng)前頁面
   if (page._path === this.pagePath) {
    //觸發(fā)子頁面刪除
    this.detailsClose(page.id)
   }
   next()
  })
 }
}

Details.vue

<template>
 <div>
  <your-component
    v-for="item in pages"
    :id="item.id"
    :key="item.id"
    v-show="item.id === pageId">
  </your-component>
 </div>
</template>
<script>
 import YourComponent from '';
 import detailsPage from '../mixins/details-page'
 export default {
  name: 'DetailsPage',
  components: {YourComponent},
  mixins: [detailsPage],
 }
</script>

這樣子組件可以只專注處理自己的固定數(shù)據(jù)，因?yàn)榻M件唯一，不用再去煩惱為每個(gè)id存儲(chǔ)視圖狀態(tài)了。

以上是“如何解決vue router動(dòng)態(tài)路由下讓每個(gè)子路由都是獨(dú)立組件的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：如何解決vuerouter動(dòng)態(tài)路由下讓每個(gè)子路由都是獨(dú)立組件的問題
轉(zhuǎn)載來于：http://muchs.cn/article6/igesog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、全網(wǎng)營銷推廣、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站導(dǎo)航、微信小程序、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)