面试题

发布时间 2024-01-08 15:42:40作者: wingring
面试官:vue router的实现方式?
回答:
1、动态组件和 <router-view>:vue router 相当于监听了路径变化,进而将对用的组件更新到页面上,首先咱们可以理解为组件内有一个变量,变量发生改变,动态的现实某一组件。
<router-view/>类似于动态组件的实现方式,相当于<component :is="..."/> ,是对<component :is="..."/> 再封装。
2、路由监听:有了这一步后我们再将这个变量跟浏览器上路径联系一起即可,实现原理则利用监听路径变化使用了window.addEventListener('hashchange', updateDom)进行了实时监听(History模式是监听popstate)。
3、mixin:为了使每个组件中都有这个变量以及显示哪个组价的这些逻辑,通过了Vue.mixin混入的功能使每个组件上都有了这个变量和逻辑。
4、路由配置:变量和组件的对应关系是通过了路由配置path和component两个配置项进行了关联。
5、组件访问路由:当然还需要向所有组件实例添加了 $router 和 $route 属性,允许组件访问路由器实例和当前路由状态。$router 是路由器实例的引用,而 $route 是一个包含当前路由信息的对象。