vue中router-view的使用

vue 中<router-view />使用

在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中

 

1 2 3

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

 当访问/foo时，router-view就被Foo组件代替了

1 2 3 4 5

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

嵌套路由

 

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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