vue 使用

在APP.vue主組件中，內容上就只有<router-view></router-view>，然后在其他頁面也有<router-view></router-view>，可以理解為：

一層路徑(/xxx)對應一個router-view

比如url: /a/b/c (假設a、b、c都為正常路徑，不會作為參數)

• 那/a對應的就是App.vue中的router-view，/a進入a.vue中
• 那/a/b對應的就是a.vue中的router-view， /a/b進入b.vue中

 

<div id="app">
  <router-view />
</div>

 當訪問/foo時，router-view就被Foo組件代替了

router.map({
  '/foo':{
    component: Foo
  }
})

嵌套路由

 

組件中依然可以使用<router-view />,要在嵌套的出口中渲染組件，需要在 VueRouter 的參數中使用 children 配置：

const router = new VueRouter({
  routes: [
    { path: '/foo/:id', component: Foo,
      children: [
        {
          // 當 /foo/:id/profile 匹配成功，
          // FooProfile 會被渲染在 Foo的 <router-view> 中
          path: 'profile',
          component: FooProfile
        },
        {
          // 當 /foo/:id/posts 匹配成功
          // FooPosts 會被渲染在 Foo的 <router-view> 中
          path: 'posts',
          component: FooPosts
        }
      ]
    }
  ]
})

要注意，以 / 開頭的嵌套路徑會被當作根路徑。 這讓你充分的使用嵌套組件而無須設置嵌套的路徑。

 

eg:https://router.vuejs.org/zh/guide/essentials/named-routes.html