vue ルーターはすべてのサブルートを独立したコンポーネントに分離します

今回は、すべてのサブルートを独立したコンポーネントに分離するための vue ルーターについて説明します。vue ルーターがすべてのサブルートを独立したコンポーネントに分離するための 注意事項は何ですか。以下は実際的なケースです。

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

vue routerの動的ルーティングの下で​​各サブルートを独立したコンポーネントにする解決策を見てみましょう

vue-routerはネストされたルーティング戦略にコンポーネントの再利用を使用しているため、これはこれは確かにほとんどのシナリオで効率的なアプローチですが、次のような状況に遭遇した場合:

には複数のサブルートが共存する必要があり、頻繁に切り替える必要があるため、それぞれのサブルートを切り替えることが非常に望まれます。 sub-router can これらはすべて独立したコンポーネントです。リッスン ルートを切り替えることで、更新されたデータをリアルタイムで処理できます

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

。これは、上記のアニメーション ページも含めて、以前から実行していましたが、これは非常に面倒で、ユーザーが必要です。切り替え前のページの表示状態に正確に戻すには考慮すべきことが多すぎるため、解決策を考え出しました。

サブルーティング コンポーネントには実際のビジネス コードは含まれず、次のリストを維持するだけです。オープンされた ID、ルーティングの切り替え ここに到達したら、ID を決定し、オープンされていないものを追加し、このリストを通じて実際のサブルーティング コンポーネントをループアウトし、各インスタンスが独立できるように現在の ID を表示します

この考えに従って書きます。 mixins

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>

を作成します。 このように、サブコンポーネントは独自の固定データの処理のみに集中できます。 ID ごとにビューステートを保存することを心配する必要はありません。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

WeChat ミニ プログラムの画像をデバイスの高さに合わせる方法

vue.js フロントエンドとバックエンドのデータ対話手順の詳細な説明

以上がvue ルーターはすべてのサブルートを独立したコンポーネントに分離しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。