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 라우터의 동적 라우팅

에서 각 하위 경로를 독립 구성 요소로 만드는 솔루션을 살펴보겠습니다. 실제로 대부분의 시나리오에서 효율적인 접근 방식이지만 다음과 같은 상황이 발생하는 경우:

공존하려면 여러 하위 경로가 필요하고 앞뒤로 자주 전환해야 하는 경우 각 하위 경로가 서브 라우터는 모두 독립적인 구성 요소입니다. 청취 경로를 전환하여 실시간으로 업데이트된 데이터를 처리할 수 있지만

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

. 위의 애니메이션 페이지를 포함하여 이전에도 이 작업을 수행했지만 이는 정말 번거롭고 사용자가 필요합니다. to 전환 전 페이지의 표시 상태로 정확하게 되돌리기 위해서는 고려해야 할 사항이 너무 많아서 해결책을 생각해냈습니다.

서브 라우팅 구성 요소는 실제 비즈니스 코드를 포함하지 않으며, 목록만 유지합니다. 열린 ID, 라우팅 전환 여기에 도착하면 ID를 결정하고, 열리지 않은 것들을 추가하고, 이 목록을 통해 실제 하위 라우팅 구성요소를 루프아웃하고, 현재 ID를 v-표시하여 각 인스턴스가 독립적일 수 있도록
이 아이디어에 따라 작성합니다. 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>
  </your-component>
 </p>
</template>
<script>
 import YourComponent from &#39;&#39;;
 import detailsPage from &#39;../mixins/details-page&#39;
 export default {
  name: &#39;DetailsPage&#39;,
  components: {YourComponent},
  mixins: [detailsPage],
 }
</script>

이렇게 하면 하위 컴포넌트는 자체 고정 데이터 처리에만 집중할 수 있습니다. 각 ID에 대한 뷰 상태 저장에 대해 걱정할 필요가 없습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

WeChat 미니 프로그램의 이미지를 기기 높이에 맞게 조정하는 방법

vue.js 프론트 엔드 및 백엔드 데이터 상호 작용 단계에 대한 자세한 설명

위 내용은 vue 라우터는 모든 하위 경로를 독립적인 구성 요소로 분리합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!