开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）
本站所有源码均为自动秒发货，默认（百度网盘）
在前端路由（尤其是 Vue Router、React Router 这类路由库）中，声明式导航和编程式导航是两种核心的页面跳转方式，核心区别在于 “触发方式” 和 “使用场景”。我会用通俗易懂的方式解释它们的区别，并结合 Vue Router（最常用的路由库）给出具体实现示例。
一、核心区别
表格
| 维度 | 声明式导航 | 编程式导航 |
|---|---|---|
| 触发方式 | 通过标签 / 组件触发（静态写法） | 通过JavaScript 代码触发（动态逻辑） |
| 使用场景 | 固定的跳转（如导航栏、按钮链接） | 带条件的跳转（如登录成功后、表单提交后） |
| 灵活性 | 低（只能配置固定参数） | 高（可结合逻辑、异步操作） |
| 写法风格 | 模板 / JSX 中写（声明 “要去哪”） | 脚本中写（命令 “去那”） |
二、具体实现（以 Vue Router 4 为例）
1. 声明式导航
核心是使用路由库提供的导航组件（Vue 中是
<router-link>），替代原生的 <a> 标签，本质是 “声明一个跳转链接”。基本实现
vue
<template>
<div>
<!-- 基础跳转：跳转到 /home 路径 -->
<router-link to="/home">首页</router-link>
<!-- 带参数的跳转：跳转到 /user/123（动态路由参数） -->
<router-link :to="'/user/' + userId">我的主页</router-link>
<!-- 带查询参数的跳转：跳转到 /search?keyword=vue -->
<router-link :to="{ path: '/search', query: { keyword: 'vue' } }">
搜索Vue
</router-link>
<!-- 替换历史记录（不会新增历史条目，返回时跳过当前页） -->
<router-link to="/about" replace>关于我们</router-link>
</div>
</template>
<script setup>
import { ref } from 'vue'
const userId = ref(123) // 动态参数
</script>
关键说明
<router-link>会被渲染为原生<a>标签，但会阻止默认的页面刷新，实现 SPA 无刷新跳转；to属性是核心：字符串形式对应路径，对象形式可配置path/name/query/params等；replace属性：默认跳转会新增历史记录，加replace则替换当前历史记录（比如登录页跳转后，返回不会回到登录页）。
2. 编程式导航
核心是调用路由实例的方法（如
push/replace/go），通过代码逻辑触发跳转，适合需要 “先处理逻辑，再跳转” 的场景。基本实现
vue
<template>
<div>
<button @click="goHome">回到首页</button>
<button @click="goUser">跳转到我的主页</button>
<button @click="goBack">返回上一页</button>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter() // 获取路由实例
// 基础跳转
const goHome = () => {
router.push('/home')
}
// 带参数的跳转（对象形式）
const goUser = () => {
// 方式1：path + query（推荐，刷新页面参数不丢失）
router.push({
path: '/user',
query: { id: 123 }
})
// 方式2：name + params（需配置路由name，刷新页面params丢失）
// router.push({
// name: 'User',
// params: { id: 123 }
// })
}
// 页面后退/前进
const goBack = () => {
router.go(-1) // -1=后退1页，1=前进1页
// 也可以用 router.back()（等价于 go(-1)）
}
// 替换当前历史记录（类似声明式的replace）
const goAbout = () => {
router.replace('/about')
}
</script>
关键说明
router.push()：最常用，新增一条历史记录，跳转到指定路径；router.replace()：替换当前历史记录，无新增；router.go(n)：控制历史记录的前进 / 后退，n为数字；- 编程式导航可以结合任意逻辑（如判断登录状态、验证表单），灵活性远高于声明式。
三、React Router 补充（可选）
如果用 React Router，核心逻辑一致，只是语法不同：
- 声明式导航：用
<Link to="/home">首页</Link>； - 编程式导航：用
useNavigate()钩子，如const navigate = useNavigate(); navigate('/home')。
总结
- 声明式导航：通过
<router-link>（Vue）/<Link>（React）标签实现，适合固定、无逻辑的跳转，写法简单、直观； - 编程式导航：通过
router.push()（Vue）/navigate()（React）代码触发，适合带条件、动态逻辑的跳转，灵活性更高； - 核心选择原则：固定跳转用声明式，需要先处理逻辑（如登录、表单验证）再跳转用编程式。
