使用Vue3展示在Vue Router中实现嵌套路由

在今天的这篇博客中，我们将深入探讨如何在Vue3中使用Vue Router实现嵌套路由。嵌套路由是构建复杂单页应用(Single Page Application, SPA)的核心，你可以使用这一特性来组织应用的不同视图层次结构。无论你是面试准备，还是在工作中需要这个技能，这篇文章都会帮助你掌握这些知识。

1. 引入Vue3和Vue Router

首先，我们需要将Vue3和Vue Router引入我们的项目中。你可以使用Vue CLI创建一个Vue3项目，这会帮你自动处理大部分设置。

如果你还没有安装Vue CLI，请在命令行中输入以下指令来安装它：

npm install -g @vue/cli

然后，创建一个新的Vue3项目：

 create vue-nested-router-demo

在创建项目时选择Vue3和Vue Router。

接下来，导航到你的项目目录：

cd vue-nested-router-demo

2. 创建基本的Vue项目

默认情况下，Vue CLI会为你生成一个基本项目结构。你可以看到一个 src 目录，里面有 App.vue 和 main.js 文件。对于我们的示例，我们需要在 src 目录中创建一些新。

创建新组件

mkdir src/components
touch src/components/Home src/components/User.vue src/components/UserProfile.vue src/components/UserPosts.vue

在这些文件中，我们添加一些简单的模板：

Home.vue

<template>
  <div>
    <h2>Home Page</h2>
  </div>
</template>

<script>
export default {
  name 'Home'
}
</script>

<style scoped>
h2 {
  color: #c3e50;
}
</style>

User.vue

<template>
  <div>
    <h2>User Page</h2>
    <router-view></router-view> <!-- Nested route will be rendered here -->
 </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

<style scoped>
h2 {
  color: #2c3e50;
}
</style>

UserProfile.vue

template>
  <div>
    <h3>User Profile</h3>
  </div>
</template>

<script>
export default {
  name: 'UserProfile'
}
</script>

<style scoped>
h3 {
  color: #8e44ad;
}
</style>

UserPosts.vue

<template>
  <div>
    <h3>User Posts</h3>
  </div>
</template>

<script>
export default {
  name: 'UserPosts'
}
</script>

<style scoped>
h3 {
  color: #3498db;
}
</style>

3. 设置Vue Router

我们现在已经有了基本的组件，接下来我们需要设置Vue Router来管理我们的路由。

首先，确保你的项目已经安装了 Vue Router。如果没有，你可以通过以下命令安装它：

npm install vue-router@next

在 src 目录下创建一个 router 文件夹，并创建一个 index.js 文件：

mkdir src/router
touch src/router/index.js

然后，在 index.js 文件中配置你的路由：

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import User from '../components/User.vue'
import UserProfile from '../components/UserProfile.vue'
import UserPosts from '../components/UserPosts.vue'

const routes = [
  { path: '/', component: Home },
  { 
    path: '/user', 
 component: User,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ] 
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

4. 配置嵌套路由

上面的配置中，我们定义了两个嵌套路由：profile 和 posts，它们都是 /user 路由的子路由。这意味着当我们访问 /user/profile 或 /user/posts 时，对应的组件将会在 User 组件内的 <router-view> 中渲染。

接下来，我们需要把这个路由对象添加到我们的 Vue 应用中。在 main.js 文件中进行设置：

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

5. 示例代码与详细解释

现在，我们已经完成了所有设置，让我们来看一下最终运行的效果。启动你的项目：

npm run serve

访问 http://localhost:8080，你将看到主页。

当你点击导航链接 /user/profile 和 /user/posts，对应的组件将会在 <router-view> 中渲染。这就是嵌套路由的威力，它允许我们在主组件中嵌套显示子组件，从而创建复杂的视图层次结构。

我们还可以在 User 组件中增加导航，来方便用户在嵌套路由间切换：

User.vue

<template>
  <div>
    <h2>User Page</h2>
    <ul>
      <li><router-link to="/user/profile">Profile</router-link></li>
      <li><router-link to="/user/posts">Posts</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

<style scoped>
h2 {
  color: #2c3e50;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 5px 0;
}
a {
  text-decoration: none;
  color: #42b983;
}
a:hover {
  text-decoration: underline;
}
</style>

当你点击这些链接时，你会发现视图在你的User组件中正确切换。

具体细节的讲解

Router View 和 Router Link： 这是Vue Router的两个核心指令。 <router-view> 是嵌套路由的关键，它指定了嵌套路由渲染的具体位置。<router-link> 是导航栏的表现形式，它能够生成一个带有路径的链接。
路径嵌套： 我们的嵌套路由结构是通过 children 属性来实现的。主路径 /user 加上子路径 profile 或 posts 就构成了嵌套路由的完整路径。

结论

通过本文，你已经学会了如何在Vue3中配置并使用嵌套路由。这种技术在构建复杂的web应用时尤为重要。嵌套路由不仅能简化你的组件结构，还能提高应用的可维护性和可扩展性。

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

在这里插入图片描述