路由系统

任务系统目前只有一个页面。为了扩展"统计页"等更多页面，需要引入 Vue Router：让"浏览器地址"与"页面组件"一一对应，点击导航即可切换视图，这就是 SPA（单页应用）的页面路由。

安装并创建路由

npm install vue-router

新建 src/router/index.js：

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

const router = createRouter({
  history: createWebHistory(),   // 使用 HTML5 History 模式
  routes: [
    { path: '/', name: 'task', component: TaskView },
    { path: '/stats', name: 'stats', component: StatsView }
  ]
})

export default router

注册到应用

// src/main.js
import router from './router'

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

页面骨架

router-view 是当前路由组件的渲染位置，RouterLink 生成可点击的导航链接：

<!-- App.vue -->
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
  <header>
    <RouterLink to="/">任务列表</RouterLink>
    <RouterLink to="/stats">统计</RouterLink>
  </header>
  <RouterView />   <!-- 根据地址渲染对应页面组件 -->
</template>

页面组件示例

任务页从 store 读数据渲染列表；统计页只读不改，展示完成率：

<!-- views/StatsView.vue -->
<script setup>
import { computed } from 'vue'
import { useTaskStore } from '../stores/task'
const store = useTaskStore()
const percent = computed(() => {
  if (!store.tasks.length) return 0
  return Math.round((store.doneCount / store.tasks.length) * 100)
})
</script>
<template>
  <h2>统计</h2>
  <p>总任务 {{ store.tasks.length }}，已完成 {{ store.doneCount }}，
     完成率 {{ percent }}%</p>
  <RouterLink to="/">返回列表</RouterLink>
</template>

效果：点击顶部导航，地址在 / 与 /stats 间切换，页面随之更换，任务数据在页面间保持共享。

未匹配路径与懒加载

加一条兜底路由，输入不存在的地址时展示 404 页面：

{ path: '/:pathMatch(.*)*', component: NotFoundView }

组件写成 ()=>import() 即为"路由懒加载"，只有访问该路径才下载对应代码，可减小首屏体积：

{ path: '/stats', component: () => import('../views/StatsView.vue') }

小结

Vue Router 让应用具备了清晰的页面结构：任务列表负责增删改，统计页负责展示派生数据。下一节把重复逻辑抽成组合式函数并做性能优化。