Vue Router 导航方式详解：声明式导航与编程式导航

Vue Router 是 Vue.js 官方推荐的路由管理器，提供了两种主要的导航方式：声明式导航和编程式导航。这两种方式各有特点，适用于不同的场景。本文将详细介绍它们的用法、区别以及底层实现原理。

声明式导航是通过模板中的 <router-link> 组件来实现路由跳转的方式。它的特点是：

<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>

可以通过绑定 to 属性实现动态路由：

<router-link :to="{ path: '/user', query: { id: 123 } }">User</router-link>

如果路由配置中定义了 name，可以使用命名路由：

<router-link :to="{ name: 'user', params: { id: 123 } }">User</router-link>

<router-link> 默认会为激活的路由添加 router-link-active 类，可以通过 active-class 属性自定义激活类名：

<router-link to="/home" active-class="active">Home</router-link>

编程式导航是通过 JavaScript 代码来实现路由跳转的方式。它的特点是：

通过 this.$router.push() 实现路由跳转：

this.$router.push('/home');
this.$router.push({ path: '/about' });

可以通过对象形式传递参数：

this.$router.push({ path: '/user', query: { id: 123 } });

如果路由配置中定义了 name，可以使用命名路由：

this.$router.push({ name: 'user', params: { id: 123 } });

使用 this.$router.replace() 替换当前路由（不会添加历史记录）：

this.$router.replace('/home');

使用 this.$router.go() 实现前进或后退：

this.$router.go(1);  // 前进
this.$router.go(-1); // 后退

特性	声明式导航 (`<router-link>`)	编程式导航 (`$router.push`)
使用场景	模板中的静态链接	JavaScript 逻辑中的动态跳转
代码位置	模板	JavaScript 代码
灵活性	较低	较高
适用性	简单跳转	复杂逻辑（如条件跳转、异步跳转）
底层实现	基于 `<a>` 标签和事件监听	基于 `history.pushState` 和 `history.replaceState`

<router-link> 组件的底层实现主要包括：

Vue Router 提供了声明式导航和编程式导航两种方式，分别适用于不同的场景：

渲染为 <a> 标签：

render(h) {return h('a', {attrs: { href: this.href },on: { click: this.navigate }}, this.$slots.default);
}

点击事件处理：
- 阻止默认行为（防止页面刷新）。
- 调用 this.$router.push() 或 this.$router.replace() 实现路由跳转。
4.2 编程式导航的实现

$router.push() 和 $router.replace() 的底层实现主要包括：
调用 transitionTo 方法：
- 匹配目标路由。
- 执行导航守卫。
- 更新路由状态。
修改浏览器 URL：
- 使用 history.pushState() 或 history.replaceState() 修改 URL。
触发视图更新：
- 通过响应式属性 _route 触发视图更新。
声明式导航：
- 适用于模板中的静态链接。
- 代码简洁，易于维护。
- 适合简单的路由跳转场景。
编程式导航：
- 适用于 JavaScript 逻辑中的动态跳转。
- 支持复杂的导航逻辑。
- 适合需要条件判断或异步处理的场景。
声明式导航：通过 <router-link> 实现，适合模板中的静态链接。
编程式导航：通过 $router.push() 或 $router.replace() 实现，适合 JavaScript 逻辑中的动态跳转。