Vue3 路由

传统多页应用每切换一个页面就请求一个新的 HTML；而单页面应用（SPA）只有一个 HTML，靠 JavaScript 切换显示的内容。路由（Router）就是 SPA 的导航系统：根据 URL 地址渲染对应的组件，让应用既有"多页"的体验又不刷新页面。Vue3 的官方路由是 vue-router 4。

安装路由

先安装路由库，然后创建路由配置文件，通常放在 src/router/index.js：

npm install vue-router@4

创建路由并注册

用 createRouter 创建路由实例，routes 数组把"路径"映射到"组件"，再通过 app.use 注册到应用：

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

const router = createRouter({
  history: createWebHistory(), // HTML5 History 模式，地址栏不带 #
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
})
export default router

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

页面中使用路由

<router-view> 是"出口"，当前路径对应的组件就渲染在它所在的位置；<router-link> 是导航链接，点击后切换路由而页面不刷新：

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
  </nav>
  <router-view />
</template>

效果：点击"关于我们"，地址栏变为 /about，<router-view> 区域渲染出 About 组件，全程不刷新页面。

动态路由与取参

路径中用冒号定义的段叫动态段，例如 :id。通过 useRoute 获取当前路由对象并读取 params：

// 路由配置
{ path: '/user/:id', component: User }

<template>
  <p>用户 ID：{{ route.params.id }}</p>
</template>
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
// 访问 /user/10086 时，页面显示"用户 ID：10086"
</script>

编程式导航

除了点击链接，还可在方法中调用 router.push 跳转；需要替换当前历史记录时用 router.replace：

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goDetail = () => router.push('/user/10086')
</script>

小结

路由让 SPA 拥有"页面感"：createRouter 声明路径与组件的对应关系，<router-view> 当出口、<router-link> 当入口，动态段 :id 负责携带参数，useRouter / useRoute 提供编程式导航。项目页面变多后，还可以结合路由懒加载与导航守卫做性能与权限控制。