router 嵌套路由

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <p>
      <router-link to="/user/foo">/user/foo</router-link> ||
      <router-link to="/user/foo/profile">/user/foo/profile</router-link> ||
      <router-link to="/user/foo/posts">/user/foo/posts</router-link>
    </p>
    <router-view></router-view>
  </div>
</body>
<script>
  const User = {
    template: `
    <div class="user">
      <h2>User {
   
   { $route.params.id }}</h2>
      <router-view></router-view>
      {
   
   { $route.params.id }}
    </div>
  `
  }
  const UserHome = { template: '<div>Home</div>' }
  const UserProfile = { template: '<div>Profile</div>' }
  const UserPosts = { template: '<div>Posts</div>' }

  const router = new VueRouter({
    routes: [
      {
        // /user/foo  id和foo对应，哈哈哈
        path: '/user/:id', component: User,
        children: [
          // UserHome will be rendered inside User's <router-view>
          // when /user/:id is matched
          { path: '', component: UserHome },

          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          { path: 'profile', component: UserProfile },

          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          { path: 'posts', component: UserPosts }
        ]
      }
    ]
  })

  const app = new Vue({ router }).$mount('#app')

</script>

</html>

要注意，以 / 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。

你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。

此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个空的子路由：

https://router.vuejs.org/zh/guide/essentials/nested-routes.htmlhttps://router.vuejs.org/zh/guide/essentials/nested-routes.html

猜你喜欢