路由跳转

博客项目只有"文章列表"还不够，还要能点进详情页、回到首页，甚至对不存在的地址给出兜底。Vue 是单页应用（SPA），页面切换不重新加载网站，而是靠 vue-router 监听 URL、渲染对应组件，这就是路由跳转。

安装与引入 vue-router

Vue3 项目安装第 4 版路由库：npm install vue-router@4。 在入口文件 main.js 中注册：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 路由配置
createApp(App).use(router).mount('#app') // 挂载前启用路由

配置路由表：路径与组件的映射

在 router/index.js 中定义"访问什么路径、渲染什么组件"：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import PostDetail from '../views/PostDetail.vue'
const routes = [
  { path: '/', name: 'home', component: Home },
  { path: '/post/:id', name: 'post-detail', component: PostDetail }
]
export default createRouter({
  history: createWebHistory(), // HTML5 History 模式，URL 更干净
  routes
})

:id 是动态路径参数，访问 /post/5 时 id 就等于 5。

声明式跳转：router-link 与 router-view

在 App.vue 中放导航链接与页面出口：

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/post/1">第一篇文章</router-link>
  </nav>
  <!-- 匹配到的组件会渲染在这里 -->
  <router-view />
</template>

运行后点击链接，地址栏变化、下方内容跟着切换，页面不会整页刷新。

编程式跳转：router.push

业务逻辑里（比如点击文章后跳详情）用 router.push 跳转：

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter() // 拿到路由实例
function goPost(id) {
  router.push(`/post/${id}`) // 等价于点击 <router-link to="/post/3">
}
</script>
<template>
  <button @click="goPost(3)">阅读第 3 篇文章</button>
</template>

router.push 会向历史记录压入新记录，浏览器"后退"可以回到上一页。

跳转方式对比

方式	写法	适用场景
声明式	<router-link to="/post/3">	模板中的静态链接
编程式	router.push('/post/3')	事件回调、登录后跳转等逻辑
两者效果一致：编程式更灵活，可在跳转前判断或拼接动态参数。

详情页读取路由参数

在 PostDetail.vue 中用 useRoute 获取当前路径信息：

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id) // 输出：5（访问 /post/5 时）
</script>

拿到 id 后，就可以请求对应文章的数据（下一节讲解）。

小结：vue-router 把"URL 路径"与"组件"绑定，router-link/router.push 负责跳转，useRoute 读取参数，单页应用因此有了多页面的体验。下一节学习组件生命周期，进入页面时请求文章数据。