vue实现路由跳转的原理是什么，是调用js底层什么方法
发布网友
发布时间：2022-04-20 10:30
共1个回答
热心网友
时间：2023-09-26 06:42
突发奇想，vue-router做单页面应用的时候是如何保证路由跳转的呢？
源码中有两种模式，一种的history模式，另一种是hash模式。
其中abstract模式的应用场景应该是服务端渲染的时候，暂不考虑
以history模式为例，要实现一个完整的路由跳转，会经过如下路径：
history.transition() -> history.confirmTransition() ->history.update(route)->app._route=route
其中当app._route=route此时会触发vue组件的re-render,那么为什么呢？
因为
在这个地方使用vue的工具函数，使得_route属性被劫持，当_router初始赋值get时就已经收集了vm._watcher,该watcher是专门用来render该vm实例的，所有当app._router=router时就触发了re-render,通过router-view函数式组件render出匹配的组件。其中this._router.init(this)就是将app=this.
当然为了适应用户通过前进后退来进行单页切换的场景，vue-router里通过监听popstate事件来触发跳转
当然，在路由跳转过去中，vue-router底层通过对前后的组件进行比较判断出deactived,actived,updated的组件，然后提供组件切换过程的一些钩子函数，辅助开发者进行特性开发
如下：
文笔不怎么地，求踩！！！！！！
