vue的router—link底层原理vue的router—link底层原理

Vue Router 的 `<router-link>` 组件实际上是通过 Vue 的 `v-once`、`v-bind` 和 `vue-router` 提供的 `$router` 对象来工作的。当用户点击 `<router-link>` 时，它会做以下几件事：

1. **HTML绑定**：`<router-link>` 元素会被数据驱动地绑定到当前路由的路径（`to` 属性），这会在渲染时创建一个链接。

2. **v-once渲染**：由于 `v-once` 指令的存在，`<router-link>` 只会在首次渲染时插入 DOM，并保留为静态元素。这意味着对于已导航到的新路由，对应的链接不会再次重新渲染，提高了性能。

3. **事件监听**：实际上，点击事件并不是直接绑定到 `<router-link>` 上，而是绑定了到 `<a>` 标签上。当用户点击时，触发的 `click` 事件会通过 Vue 实例内部传递给路由处理器，进行路由跳转。

4. **路由更新**：事件处理函数会检测目标 URL 是否与当前路由匹配，如果不匹配，则调用 `$router.push()` 或 `$router.replace()` 方法进行路由切换。