vue 라우터 동적 라우팅 작업 하위 라우팅

이번에는 Vue Router 동적 라우팅을 사용하여 서브 라우팅을 운영할 때 주의할 점을 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

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를 작성합니다. PHP 중국어 웹사이트에 관련 기사가 있습니다!

추천 도서:

노드를 사용하여 개인 계정 로봇을 만드는 방법

vue.js를 사용하여 사용자 로그인 제어

위 내용은 vue 라우터 동적 라우팅 작업 하위 라우팅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!