Der Vue-Router trennt alle Unterrouten in unabhängige Komponenten

Dieses Mal bringe ich Ihnen einen Vue-Router, um alle Unterrouten in unabhängige Komponenten zu unterteilen. Was sind die Vorsichtsmaßnahmen für den Vue-Router, um alle Unterrouten in unabhängige Komponenten zu unterteilen? Werfen wir einmal einen Blick.

Dynamisches Routing des Vue-Routers

vue-router官网上面是这样说的
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
然后，我就这样写了：
this.$router.push({path:'manage', query: {id: 'tasklist'}})1
结果很明显，失败了。然后我就默默的再次看了一下官网，结果发现了这句话
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', params: { plan: 'private' }})
注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 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
谨记啊，动态实现二级路由，需要先用变量保存二级路由名称(let router = 'tasklist')，然后调用this.$router.push({path: `/user/${router}`}).

Werfen wir einen Blick auf die Lösung, jede Unterroute zu einer unabhängigen Komponente unter dem dynamischen Routing des Vue-Routers zu machen

Da vue-router eine Komponentenwiederverwendungsstrategie für verschachteltes Routing anwendet, ist dies in den meisten Szenarien tatsächlich ein effizienter Ansatz, aber wenn Sie auf diese Situation stoßen:

besteht darin, die Koexistenz mehrerer Unterrouten zu erfordern. Wenn häufig hin und her gewechselt werden muss, ist es sehr wünschenswert, jede Unterroute zu einer unabhängigen Komponente zu machen, obwohl Sie durch Abhörrouten wechseln können

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

Die Verarbeitung aktualisierter Daten in Echtzeit, einschließlich der Animationsseite oben, ist jedoch sehr mühsam, damit Benutzer vor dem Wechsel genau zum Anzeigestatus der Seite zurückkehren können Da es zu viele Dinge gab, habe ich eine Lösung gefunden:

Die Sub-Routing-Komponente beinhaltet keinen tatsächlichen Geschäftscode, sondern verwaltet nur eine Liste der geöffneten IDs Hier umgeschaltet, bestimmt es die IDs und diejenigen, die nicht geöffnet wurden. Fügen Sie die tatsächlichen Sub-Routing-Komponenten hinzu, schleifen Sie sie durch diese Liste und zeigen Sie die aktuelle ID an, sodass jede Instanz unabhängig sein kann.

Ich habe ein Mixins geschrieben Basierend auf dieser Idee

details -page.js

export default {
 watch: {
  '$route'(to, from) {
   this.detailsLeave(from);
   this.detailsOpen(to);
  }
 },
 data() {
  return {
   pagePath: '',
   pageId: 0,
   pages: {}
  }
 },
 methods: {
  /**
   * 子页面打开触发
   * @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
     })
    }
    //路由打开 跳转滚动条
    this.pageId = route.params.id;
    this.$nextTick(()=>{
     this.$parent.$el.firstChild.scrollTop = this.pages[route.params.id].scrollTop;
    });
   }
  },
  /**
   * 路由切换触发
   * 判断离开的路由是否是当前页面，如果是则记录滚动条高度
   * @param route
   */
  detailsLeave(route) {
   if (this.detailsPathGet(route.path) === this.pagePath) {
    if (this.pages[route.params.id]) {
     //记录滚动条高度 此处针对ea-admin后台 不同的框架要记录的滚动条el不同
     this.pages[route.params.id].scrollTop = this.$parent.$el.firstChild.scrollTop ;
    }
   }
  },
  /**
   * 子页面关闭函数
   * @param id
   */
  detailsClose(id) {
   delete this.pages[id]
  },
  /**
   * 取路由不含最后一项参数的地址
   * @param path
   * @returns {string}
   */
  detailsPathGet(path) {
   const i = path.lastIndexOf('/');
   return path.substr(0, i);
  }
 },
 mounted() {
  //通过当前路由地址创建页面识别地址 注：只对path: '/user/:id' 有效 当 path: /user/:id/profile 失效
  this.pagePath = this.detailsPathGet(this.$route.path);
  //执行第一次子页面打开
  this.detailsOpen(this.$route);
  //监听标签关闭消息 此处针对ea-admin后台 不同框架监听关闭方式不同
  this.$tabs.onRemove((page, next) => {
   //收到标签关闭回调，判断关闭的是否是当前页面
   if (page._path === this.pagePath) {
    //触发子页面删除
    this.detailsClose(page.id)
   }
   next()
  })
 }
}

Details.vue

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

Auf diese Weise kann sich die Unterkomponente nur auf die Verarbeitung ihrer eigenen festen Daten konzentrieren. Da die Komponente eindeutig ist, besteht kein Grund zur Sorge, den Ansichtsstatus für jede ID zu speichern.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So passen Sie Bilder im WeChat-Applet an die Modellgröße an

vue.js Frontend und Back-End-Daten Detaillierte Erläuterung der Interaktionsschritte

Das obige ist der detaillierte Inhalt vonDer Vue-Router trennt alle Unterrouten in unabhängige Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!