编程使用 Vue 3 实现 Vue Router 中的嵌套路由

2024-11-19 08:00:19 +0800 CST views 419

使用 Vue 3 实现 Vue Router 中的嵌套路由

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

1. 引入 Vue 3 和 Vue Router

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

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

npm install -g @vue/cli

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

vue create vue-nested-router-demo

在创建项目时选择 Vue 3 和 Vue Router。接下来，导航到你的项目目录：

cd vue-nested-router-demo

2. 创建基本的 Vue 项目

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

创建新组件

在 src/components 目录下创建以下文件：

mkdir src/components
touch src/components/Home.vue 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> <!-- 嵌套路由将渲染在这里 -->
  </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 构成了嵌套路由的完整路径。

结论

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

复制全文生成海报前端开发 Vue 路由管理

编程 使用 Vue 3 实现 Vue Router 中的嵌套路由