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

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

1. 声明式导航

1.1 什么是声明式导航？

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

• 直观：直接在模板中声明导航链接。

• 易用：无需编写 JavaScript 代码即可实现路由跳转。

• 语义化：符合 Vue 的声明式编程风格。

1.2 基本用法

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

• to 属性：指定目标路由的路径。

• 默认渲染为 <a> 标签：点击后会跳转到指定路由。

1.3 动态路由

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

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

• path：目标路径。

• query：查询参数。

1.4 命名路由

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

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

• name：路由名称。

• params：路径参数。

1.5 激活样式

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

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

2. 编程式导航

2.1 什么是编程式导航？

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

• 灵活：可以在任意逻辑中触发路由跳转。

• 强大：支持复杂的导航逻辑（如条件跳转、异步跳转）。

• 可控：可以手动处理导航失败或取消的情况。

2.2 基本用法

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

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

2.3 动态路由

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

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

2.4 命名路由

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

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

2.5 替换当前路由

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

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

2.6 前进/后退

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

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

3. 声明式导航与编程式导航的区别

4. 底层实现原理

4.1 声明式导航的实现

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

5. 使用建议

6. 总结

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

1. 渲染为 <a> 标签：

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

2. 点击事件处理：

   • 阻止默认行为（防止页面刷新）。

   • 调用 this.$router.push() 或 this.$router.replace() 实现路由跳转。

3. 4.2 编程式导航的实现

   $router.push() 和 $router.replace() 的底层实现主要包括：

4. 调用 transitionTo 方法：

   • 匹配目标路由。

   • 执行导航守卫。

   • 更新路由状态。

5. 修改浏览器 URL：

   • 使用 history.pushState() 或 history.replaceState() 修改 URL。

6. 触发视图更新：

   • 通过响应式属性 _route 触发视图更新。

7. 声明式导航：

   • 适用于模板中的静态链接。

   • 代码简洁，易于维护。

   • 适合简单的路由跳转场景。

8. 编程式导航：

   • 适用于 JavaScript 逻辑中的动态跳转。

   • 支持复杂的导航逻辑。

   • 适合需要条件判断或异步处理的场景。

9. 声明式导航：通过 <router-link> 实现，适合模板中的静态链接。

10. 编程式导航：通过 $router.push() 或 $router.replace() 实现，适合 JavaScript 逻辑中的动态跳转。