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中文網其它相關文章！

推薦閱讀：

Vue.js的vue標籤屬性與條件渲染

使用Vue.js有哪些注意事項

以上是Vue.js的巢狀路由(子路由)的詳細內容。更多資訊請關注PHP中文網其他相關文章！