首页 > 其他分享 >Vue路由实现的底层原理

Vue路由实现的底层原理

时间:2022-11-07 20:57:10浏览次数:46  
标签:劫持 Vue route Router router 路由 底层

在Vue中利用数据劫持defineProperty在原型prototype上初始化了一些getter,分别是router代表当前Router的实例 、 router代表当前Router的实例、
router代表当前Router的实例、route 代表当前Router的信息。
在install中也全局注册了router-view,router-link,其中的Vue.util.defineReactive, 这是Vue里面观察者劫持数据的方法,劫持_route,
当_route触发setter方法的时候,则会通知到依赖的组件。 接下来在init中,会挂载判断是路由的模式,是history或者是hash,点击行为按钮,
调用hashchange或者popstate的同时更_route,_route的更新会触发route-view的重新渲染。

标签:劫持,Vue,route,Router,router,路由,底层
From: https://www.cnblogs.com/ltwlh/p/16867400.html

相关文章

  • 服务器请求400(由于被认为是客户端对错误(例如:畸形的请求语法、无效的请求信息帧或者虚
    请求400的原因有很多,常见的为前端数据在调用后端控制器的时候出现的封装错误常为,封装的时候,实体类中的变量名与前端传来的字段名不一致导致的下面是我今天遇到的一个400......
  • day27SPA路由及SASS讲解
    路由前端路由:根据对应路由地址渲染不同的内容前端路由的分类:1.页面路由(刷新):根据地址访问不同的页面(location.href location.assign location.replace)hash路由(不会刷......
  • vue共享屏幕功能
    参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getDisplayMedia使用方法:https://developer.mozilla.org/zh-CN/docs/Web/API/Screen_Capture_A......
  • luffy项目路由分发
    1.总路由路由分发比较简单fromdjango.urlsimportinclude就需要调用include然后在后面加路由地址就ok,前面和普通路由写法一样path('API/V1/home/',include('home.......
  • vue实现展开收起
    通过设置css超出换行,监听是否超出所设置的值,重新对数据插入标识,并刷新dom树实现。<divclass="class-datas"> <pclass="datas-title">可排课专业:</p> <p:class="`${......
  • 拖拽功能 vue + 移动端
    1.  在components里面创建一个公共组件,dragMove.vue<!--拖拽滑动效果--><template><divid="item_box"@click="goMove"@touchstart="down"@touchmove="move"......
  • vue2.0引入css文件后报错
    vue2.0的main.js中引入css文件后报错。报错示例:UncaughtError:Moduleparsefailed:/Users/**/Desktop/vue2/node_modules/.1.0.0-rc.5@element-ui/lib/theme-default/i......
  • vue项目中定义全局变量、全局函数
    在vue项目中,我们经常会遇到要在多个页面组件中都要使用的一个变量或者函数,比如说需要配置的ip地址,在生产环境和测试环境不一样就需要修改。因此我们可以定义一个全局变量来......
  • Vue构建一个项目
    vue2.0推荐开发环境Homebrew1.0.6(Mac)Node.js6.7.0npm3.10.3webpack1.13.2vue-cli2.4.0Atom1.10.2构建vue项目1、下载node.js下载地址:https://nodejs.org/en/检查是......
  • Vue 3.x 的 script setup 语法糖用法详解
    由于原来vue3中的setupCompositionAPI语法太过于冗长麻烦,官方又出了这么个语法糖,非常的好用了。这里介绍一些常用的语法:一、如何开始使用?1、需要关闭vetur插件,安装Vol......