嵌套路由 | router view child
一些应用程序的UI由多层嵌套的组件组成。在这种情况下,URL的片段通常对应于特定的嵌套组件结构,例如:/user/johnny/profile/user/johnny/posts+------------------++-----------------+|User||User||+--------------+||+-------------+|||Profile||+------------>||Posts|||||||||||+--------------+||+-------------+|+------------------++-----------------+通过VueRouter,你可以使用嵌套路由配置来表达这种关系。接着上节创建的app:html
一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下,URL 的片段通常对应于特定的嵌套组件结构,例如:
/user/johnny/profile /user/johnny/posts +------------------+ +-----------------+ | User | | User | | +--------------+ | | +-------------+ | | | Profile | | +------------> | | Posts | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+通过 Vue Router,你可以使用嵌套路由配置来表达这种关系。
接着上节创建的 app :
html<div id="app"> <router-view></router-view> </div>jsconst User = { template: <div>User {{ $route.params.id }}</div>, } // 这些都会传递给 `createRouter` const routes = [{ path: /user/:id, component: User }]这里的 <router-view> 是一个顶层的 router-view。它渲染顶层路由匹配的组件。同样地,一个被渲染的组件也可以包含自己嵌套的 <router-view>。例如,如果我们在 User 组件的模板内添加一个 <router-view>:
jsconst User = { ...