前言

一些應用程序的 UI 由多層嵌套的組件組成。在這種情況下，URL 的片段通常對應于特定的嵌套組件結構，例如：

一、嵌套路由使用指南

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

通過 Vue Router，你可以使用嵌套路由配置來表達這種關系。

我重新在App.vue中編寫測試嵌套路由代碼，：

  <router-link to="/users/eduardo">/users/eduardo</router-link>   
  <br />
  <router-link to="/users/eduardo/profile" >
  /users/eduardo/profile</router-link>
  <br />
  <router-link to="/users/eduardo/posts">/users/eduardo/posts</router-link>
  <RouterView></RouterView>

路由配置，并且使用了新的寫法：

//對象方式創(chuàng)建個組件
const UserR = {
    template: `
      <div class="user">
        <h2>User {{ $route.params.id }}</h2>
        <router-view></router-view>
      </div>
    `,
  }

  const UserProfile = {
    template: `
      <div >
        <h4>User:Profile</h4>
      </div>
    `,
  }

  const UserPosts = {
    template: `
      <div >
        <h4>User:Post</h4>
      </div>
    `,
  }
  const UserHome = {
    template: `
      <div >
        <h4>User:UserHome</h4>
      </div>
    `,
  }

    //創(chuàng)建路由器
    const router = createRouter({
    history:createWebHistory(),
    routes:[

           {
        path: '/users/:id',
        component: UserR,
        name: 'user-parent',
        children: [
            // { path: '', name: 'users',component: UserHome },
            {
            // 當 /user/:id/profile 匹配成功
            // UserProfile 將被渲染到 User 的 <router-view> 內(nèi)部
            path: 'profile',
            name: 'users',
            component: UserProfile,
            },
            {
            // 當 /user/:id/posts 匹配成功
            // UserPosts 將被渲染到 User 的 <router-view> 內(nèi)部
            path: 'posts',
            component: UserPosts,
            },
        ]}
    ]
    })

App.vue中的 是一個頂層的 router-view。它渲染頂層路由匹配的組件。同樣地，一個被渲染的組件也可以包含自己嵌套的 。例如，如果我們在 User 組件的模板內(nèi)添加的一個

二、運行效果和注意事項

運行結果：

image.png

image.png

image.png

image.png

1.嵌套的命名路由

在處理命名路由時，你通常會給子路由命名，代碼如下（示例）：

const routes = [
  {
    path: '/user/:id',
    component: User,
    // 請注意，只有子路由具有名稱
    children: [{ path: '', name: 'users', component: UserHome }],
  },
]

這將確保導航到 /user/:id 時始終顯示嵌套路由。

在一些場景中，你可能希望導航到命名路由而不導航到嵌套路由。例如，你想導航 /user/:id 而不顯示嵌套路由。那樣的話，你還可以命名父路由，但請注意重新加載頁面將始終顯示嵌套的子路由，因為它被視為指向路徑/users/:id 的導航，而不是命名路由：

{
    path: '/user/:id',
    name: 'user-parent',
    component: User,
    children: [{ path: '', name: 'users', component: UserHome }],
  },

這段話需要仔細地理解，其實只是說明了直接使用嵌套路由的name來跳轉(zhuǎn)的功能。

  <router-link :to="{ 
    name: 'users', 
    params: { 
      id: 'erina'
     }
    }"
    >
    /users/eduardo
  </router-link>

 <router-link :to="{ 
  name: 'user-parent', 
  params: { 
    id: 'erina'
   }
  }"
  >
  /users/eduardo
</router-link>

注意：const 聲明組件的方式遇到了個小問題：

<mark style="box-sizing: border-box; background-color: rgb(248, 248, 64); color: rgb(0, 0, 0);">[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias “vue” to “vue/dist/vue.esm-bundler.js”.</mark>
解決方式：

在vite.config.mts文件中resolve選項下增加：

    alias: {

      'vue': 'vue/dist/vue.esm-bundler.js'

    }

總結

在實際應用中，許多頁面都有固定的頭部和底部，而中間的內(nèi)容部分會根據(jù)路由變化而變化。比如，一個用戶面板，頂部是標題和導航，底部是版權信息，中間部分可能是用戶信息、訂單列表或者設置選項等。
在 Vue-Router 中，我們可以為每個路由定義一個組件，而嵌套路由允許我們在這些組件內(nèi)部再定義子路由，每個子路由也可以有自己的組件。這樣，當訪問子路由時，相應的組件就會渲染到父路由組件的 中。
說白了，嵌套路由多用于布局管理中。

人生如夢，一切都是過眼云煙。