Utilisez vue router pour exploiter le routage dynamique afin que chaque sous-route soit un composant indépendant

Cette fois, je vais vous présenter comment utiliser vue router pour opérer un routage dynamique afin que chaque sous-route soit un composant indépendant. Utilisez vue router pour opérer un routage dynamique afin que chaque sous-route soit un composant indépendant. >Notes Oui Lesquels, les suivants sont des cas pratiques, jetons-y un coup d'œil.

Routage dynamique de vue-router

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}`}).

Jetons un coup d'œil à la solution consistant à faire de chaque sous-route un composant indépendant sous le routage dynamique de vue router

Étant donné que vue-router adopte une stratégie de réutilisation de composants pour le routage imbriqué, il s'agit en effet d'une approche efficace dans la plupart des scénarios, mais si vous rencontrez cette situation :

La coexistence de plusieurs sous-itinéraires est nécessaire, et s'il y a un besoin de commutations fréquentes, il est très souhaitable de faire de chaque sous-itinéraire un composant indépendant, bien qu'il puisse être commuté par surveillance. l'itinéraire

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

Pour traiter les données mises à jour en temps réel, j'ai toujours fait cela auparavant, y compris la page d'animation ci-dessus, mais cela est vraiment gênant. Cela oblige l'utilisateur à revenir avec précision à l'état d'affichage de. la page avant de changer pendant le changement, il y avait trop de choses à considérer, j'ai donc trouvé une solution :

Le composant de sous-routage n'implique pas de code métier réel, il maintient uniquement une liste d'identifiants ouverts. . Lorsque le routage est commuté ici, l'identifiant est jugé. Ajoutez ceux qui n'ont pas été ouverts, bouclez les composants de sous-routage réels à travers cette liste, affichez l'identifiant actuel, de sorte que chaque instance soit indépendante

I. a écrit un mixins basé sur cette idée

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>

De cette façon, le sous-composant ne peut se concentrer que sur le traitement de ses propres données fixes Le composant étant unique, il n'y a pas lieu de s'en soucier. L'état d'affichage est stocké pour chaque identifiant.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment gérer l'état de mise à jour de la méthode vuex dans le composant parent et le composant enfant ne peut pas mettre à jour le rendu à temps

Comment utiliser vue implémente l'optimisation des performances de vérification SMS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!