Vue.js의 중첩 라우팅(하위 라우팅)

이번에는 Vue.js의 중첩 라우팅(서브 라우팅)에 대해 알려드리겠습니다. Vue.js 중첩 라우팅(서브 라우팅) 사용 시 주의사항은 무엇인가요? 바라보다.

children
중첩된 라우팅, 하위 경로는 상위 구성 요소 apple

let router = new VRouter({ // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',  routes: [    //  做一个映射表
    {      path: '/apple',      component: Apple,      // 嵌套路由,子路由插入到了父组件apple中
      children: [
        {          path: 'red',          component: RedApple
        }
      ]
    },
    {      path: '/banana',      component: Banana
    }
  ]
})

상위 라우팅 apple 구성 요소에 RedApple 구성 요소를 삽입합니다.

<template>  <div class="hello">
    .......    <router-view></router-view>
  </div></template>

to red apple
<router-link :to="{path:&#39;apple/red&#39;}">to red apple</router-link>

에서 사례를 읽은 후 방법을 마스터했다고 믿습니다. 이 기사 외 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트Other 관련 기사를 주목하세요!

추천 자료:

Vue.js의 Vue 태그 속성 및 조건부 렌더링

Vue.js 사용 시 주의사항은 무엇인가요

위 내용은 Vue.js의 중첩 라우팅(하위 라우팅)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!