Vue3实战笔记（24）—路由Vue-Router 实战指南（嵌套路由）

---

前言

一些应用程序的 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>

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

//对象方式创建个组件
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>
    `,
  }
  
    //创建路由器
    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> 内部
            path: 'profile',
            name: 'users',
            component: UserProfile,
            },
            {
            // 当 /user/:id/posts 匹配成功
            // UserPosts 将被渲染到 User 的 <router-view> 内部
            path: 'posts',
            component: UserPosts,
            },
        ]}
    ]
    })

App.vue中的 是一个顶层的 router-view。它渲染顶层路由匹配的组件。同样地，一个被渲染的组件也可以包含自己嵌套的 。例如，如果我们在 User 组件的模板内添加的一个

二、运行效果和注意事项

运行结果：

关于嵌套的命名路由，在处理命名路由时，你通常会给子路由命名，代码如下（示例）：

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来跳转的功能。

  <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 声明组件的方式遇到了个小问题：

[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”.
解决方式：

在vite.config.mts文件中resolve选项下增加：

    alias: {

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

    }

---

总结

在实际应用中，许多页面都有固定的头部和底部，而中间的内容部分会根据路由变化而变化。比如，一个用户面板，顶部是标题和导航，底部是版权信息，中间部分可能是用户信息、订单列表或者设置选项等。
在 Vue-Router 中，我们可以为每个路由定义一个组件，而嵌套路由允许我们在这些组件内部再定义子路由，每个子路由也可以有自己的组件。这样，当访问子路由时，相应的组件就会渲染到父路由组件的 中。
说白了，嵌套路由多用于布局管理中。

人生如梦，一切都是过眼云烟。