【Vue3实战】嵌套路由让前端项目结构更清晰

风清扬雨

于 2024-09-08 22:02:42 发布

阅读量844

点赞数 5

分类专栏：前端Vue3 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/Jacklx888/article/details/142034080

版权

前端Vue3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Hey小伙伴们，今天要跟大家分享的是Vue3中的一个超实用技巧——嵌套路由（Nested Routing）。无论你是Vue的新手还是老手，都一定不能错过这篇指南，因为学会它，你的项目结构将会变得更加清晰有序！👩‍💻✨

📚 什么是嵌套路由？

嵌套路由是指在Vue Router中定义一个父路由，然后在这个父路由下定义多个子路由。这样做的好处是可以让你的项目结构更加模块化，而且在导航栏、面包屑等地方展示层级关系时也更加直观。

💡 为什么要用嵌套路由？

想象一下，当你在开发一个大型的SPA（单页应用）时，页面之间有着紧密的逻辑关联。如果每个页面都是独立的路由，那么项目结构会显得杂乱无章。而使用嵌套路由，可以让相关的页面聚合在一起，形成一个逻辑单元，便于管理和维护。

📝 如何实现嵌套路由？

下面通过一个简单的案例来展示如何在Vue3项目中实现嵌套路由。

1. 创建Vue项目

首先，我们需要创建一个新的Vue3项目。如果你还没有安装Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

然后创建一个新的项目：

vue create nested-routing-example
cd nested-routing-example

2. 安装Vue Router

Vue Router是Vue.js官方的路由管理插件，它和Vue.js的核心深度集成，让开发者能够轻松地为应用程序添加路由。

npm install vue-router@4

3. 设置路由

在src/router/index.js文件中设置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import UserProfile from '../views/UserProfile.vue'

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'about',
        component: About,
      },
      {
        path: 'user/:id',
        component: UserProfile,
        props: true, // 将路由参数直接传递给组件作为props
      },
    ],
  },
]

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

export default router

4. 更新主应用文件

在src/main.js文件中引入并使用路由：

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

const app = createApp(App)

app.use(router)

app.mount('#app')

5. 更新视图文件

接下来，我们需要在视图文件中使用<router-view>来展示路由对应的组件。在src/views/Home.vue中添加子路由的展示区域：

<template>
  <div>
    <h1>首页</h1>
    <router-link to="/about">关于我们</router-link>
    <router-link to="/user/1">用户详情</router-link>

    <!-- 子路由的视图 -->
    <router-view></router-view>
  </div>
</template>

6. 用户详情页面

在src/views/UserProfile.vue中，我们可以展示用户的具体信息：

<template>
  <div>
    <h1>User Profile</h1>
    <p>ID: {{ id }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  props: ['id'],
}
</script>