Vue3 Router 入门指南：构建单页面待办应用Vue3 Router 入门指南：构建单页面待办应用一、为什么需要

Vue3 Router 入门指南：构建单页面待办应用

一、为什么需要路由系统

在前端开发中，路由系统核心解决两个问题：

不同视图之间的切换
浏览器地址栏与视图状态的同步 Vue Router 作为官方路由库，完美集成 Vue 生态，支持：

动态路由匹配
嵌套路由
路由参数解析
导航守卫
多级历史记录

二、环境搭建

首先创建 Vue3 项目并安装路由依赖：

npm init vue@latest # 创建 Vue3 项目
cd your-project
npm install vue-router@4 # 安装 v4 版本适配 Vue3

三、基础概念解析

1. 路由表配置

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

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
]

const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 History 模式
  routes
})

export default router

2. 动态路由匹配

// 配置动态参数路由
{ 
  path: '/user/:id', 
  name: 'User', 
  component: UserProfile,
  props: true // 将路由参数作为组件props
}

3. 嵌套路由实践

// 主路由配置
{
  path: '/dashboard',
  component: DashboardLayout, // 布局容器组件
  children: [
    { path: '', redirect: 'welcome' }, // 默认重定向
    { path: 'welcome', component: WelcomePage },
    { path: 'settings', component: SettingsPage }
  ]
}

四、实战案例：待办事项应用

1. 项目结构设计

src/
├─ components/
│ ├─ NavBar.vue         # 导航栏组件
│ └─ TaskList.vue       # 任务列表组件
├─ views/
│ ├─ Home.vue           # 首页（任务概览）
│ ├─ CreateTask.vue     # 创建任务页
│ └─ TaskDetail.vue     # 任务详情页
├─ router/
│ └─ index.js           # 路由配置文件
└─ App.vue              # 主应用入口

2. 路由配置实现

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import CreateTask from '../views/CreateTask.vue'
import TaskDetail from '../views/TaskDetail.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/create', name: 'CreateTask', component: CreateTask },
  { path: '/task/:id', name: 'TaskDetail', component: TaskDetail, props: true }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { top: 0 } // 返回滚动位置
  }
})

export default router

3. 导航组件实现

<!-- src/components/NavBar.vue -->
<template>
  <nav>
    <router-link to="/">首页</router-link> |
    <router-link to="/create">创建任务</router-link>
    <div v-if="$route.name === 'TaskDetail'">
      <button @click="editTask">编辑</button>
      <button @click="deleteTask">删除</button>
    </div>
  </nav>
</template>

<script>
export default {
  methods: {
    editTask() { /* 编辑逻辑 */ },
    deleteTask() { /* 删除逻辑 */ }
  }
}
</script>

4. 动态路由参数应用

<!-- src/views/TaskDetail.vue -->
<template>
  <div>
    <h2>{{ task.title }}</h2>
    <p>{{ task.description }}</p >
    <small>创建时间：{{ task.created_at }}</small>
  </div>
</template>

<script>
export default {
  props: ['id'], // 接收路由参数
  data() {
    return {
      task: {} // 模拟任务数据
    }
  },
  created() {
    // 根据 $route.params.id 获取任务数据
    this.fetchTask(this.id)
  },
  watch: {
    '$route.params.id'(newId) { // 监听路由变化
      this.fetchTask(newId)
    }
  },
  methods: {
    fetchTask(id) { /* 根据 ID 获取任务数据 */ }
  }
}
</script>

五、高级特性实现

1. 导航守卫应用

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = getUserAuthStatus() // 获取认证状态
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ path: '/login', query: { redirect: to.fullPath } })
  } else {
    next()
  }
})

2. 元信息配置

// 配置路由元信息
{ 
  path: '/admin', 
  component: AdminPanel, 
  meta: { requiresAuth: true, roles: ['admin'] } 
}

3. 懒加载优化

// 按需加载组件
{ 
  path: '/profile', 
  name: 'Profile', 
  component: () => import('../views/Profile.vue') 
}

六、完整代码示例

App.vue 主入口

<template>
  <div id="app">
    <NavBar />
    <main>
      <router-view />
    </main>
    <Footer />
  </div>
</template>

<script>
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由实例
import NavBar from './components/NavBar.vue'
import Footer from './components/Footer.vue'

const app = createApp(App)
app.use(router) // 注册路由插件
app.mount('#app')
</script>

七、调试技巧

路由打印：console.log(this.$route) 查看当前路由对象
断点调试：在导航守卫中设置断点，检查路由跳转逻辑
浏览器工具：使用 Chrome DevTools 的 Network -> XHR 查看路由相关请求
Vue DevTools：检查组件树中的路由匹配情况

通过本文从基础到进阶的学习，你已经掌握了：

Vue Router 的核心配置方法
动态/嵌套路由的实现方式
路由参数与组件通信的实践技巧
导航守卫与元信息的配置策略
实际项目中的性能优化方案