Vue Router - 巢狀路由 – 竹白記事本

竹白的 Vue 記事本目錄

巢狀路由

多層巢狀範例：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

在巢狀的出口中渲染元件，需要在路由配置中使用 children 屬性，接受一個 RouteConfig 陣列。：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


{
  path: '/user/:id',
  component: User,
  children: [
    {
      path: 'profile',
      component: UserpProfile,
    },
    {
      path: 'posts',
      component: UserPosts,
    },
  ],
}

注意，巢狀時 path 不帶 /，否則會被當作根路徑。

子路由會被渲染在元件中的 <router-view> 位置：

1
2
3
4
5
6
7
8


const User = {
  template: `
  <div>
    <h1>User</h1>
    <router-view />
  </div>
`,
};

如果希望 /user/foo 有預設子路由，可以提供一個空路徑：

1
2
3
4
5
6
7


children: [
  { 
    path: '',
    component: UserHome
  },
  // ...
],

或者，你希望預設是子路由中的其中一個，可以使用 redirect 轉向：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


{
  path: '/user/:id',
  component: User,
  redirect: '/user/:id/profile',
  children: [
    {
      path: 'profile',
      component: UserProfile,
    },
    {
      path: 'posts',
      component: UserPosts,
    },
  ],
}

CodePen Demo：Vue 2.x - 巢狀路由

Vue Router - 巢狀路由

巢狀路由

相關內容

文章目錄