Vue router原理

Vue router原理总结:vue-router是vue项目的重要组成部分,用于构建单页应用。单页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。路由的本质就是建立url和页面之间的映射关系router模式hash/historyhash模式是vue-router的默认模式。hash指的是url锚点,当锚点发生变化的时候,浏览器只会修改访问历史记录,不会访问服务器重新获取页面。因此可以监听描点值的变化,根据描点值渲染指定dom。hash监听方法:window.addEventListene

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

总结:

vue-router是vue项目的重要组成部分,用于构建单页应用。单页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。路由的本质就是建立url和页面之间的映射关系

router 模式

hash / history

hash模式是vue-router的默认模式。hash指的是url锚点,当锚点发生变化的时候,浏览器只会修改访问历史记录,不会访问服务器重新获取页面。因此可以监听描点值的变化,根据描点值渲染指定dom。

hash监听方法:

window.addEventListener('hashchange', () => { 
   
   const hash = window.location.hash.substr(1)
   // 根据hash值渲染不同的dom
})

hash模式下,url可能为以下形式:
http://localhost:8080/index.html#/book?bookid=1

history模式,url会如下面所示:
http://localhost:8080/book/1

history模式
H5的history对象提供了pushState和replaceState两个方法,当调用这两个方法的时候,url会发生变化,浏览器访问历史也会发生变化,但是浏览器不会向后台发送请求。

// 第一个参数:data对象,在监听变化的事件中能够获取到
// 第二个参数:title标题
// 第三个参数:跳转地址
history.pushState({}, "", '/a')

history监听方法:
通过监听popstate事件监听history变化,也就是点击浏览器的前进或者后退功能时触发。

window.addEventListener("popstate", () => { 
   
    const path = window.location.pathname
    // 根据path不同可渲染不同的dom
})

once more
总体来讲就是 利用hash 或者history 模式修改部分 url,不会向后端发送请求,并且能监听到url变化,根据不同url 映射到不同页面

Vue中实现原理
VueRouter核心是,通过Vue.use注册插件,在插件的install方法中获取用户配置的router对象。当浏览器地址发生变化的时候,根据router对象匹配相应路由,获取组件,并将组件渲染到视图上。

1.url改变
2.触发事件监听
3.改变vue-router中的current变量
4.监视current变量的监视者
5.获取新的组件
6.render

// 存储全局使用的Vue对象
let _Vue = null
class VueRouter { 

// vue.use要求plugin具备一个install方法
static install (Vue) { 

// 判断插件是否已经安装过
if (VueRouter.install.installed) { 

return
}
VueRouter.install.installed = true
_Vue = Vue
// 将main文件中实例化Vue对象时传入的router对象添加到Vue的原型链上。
_Vue.mixin({ 

beforeCreate () { 

if (this.$options.router) { 

_Vue.prototype.$router = this.$options.router
}
}
})
}
constructor (options) { 

this.options = options
// 用于快速查找route
this.routeMap = { 
}
this.data = _Vue.observable({ 

current: window.location.hash.substr(1)
})
this.init()
}
init () { 

this.createRouteMap()
this.initComponents(_Vue)
this.initEvent()
}
createRouteMap () { 

// 遍历所有的路由规则 吧路由规则解析成键值对的形式存储到routeMap中
this.options.routes.forEach(route => { 

this.routeMap[route.path] = route.component
})
}
initComponents (Vue) { 

// 注册router-link组件
Vue.component('router-link', { 

props: { 

to: String
},
methods: { 

clickHandler (e) { 

// 修改hash
location.hash = this.to
// 修改current,触发视图更新
this.$router.data.current = this.to
e.preventDefault()
}
},
render (h) { 

return h('a', { 

attrs: { 

href: this.to
},
on: { 

click: this.clickHandler
}
}, [this.$slots.default])
}
})
const that = this
// 注册router-view插件
Vue.component('router-view', { 

render (h) { 

const component = that.routeMap[that.data.current]
return h(component)
}
})
}
initEvent () { 

// 在hash发生更改的时候,修改current属性,触发组件更新
window.addEventListener('hashchange', () => { 

this.data.current = window.location.hash.substr(1)
})
}
}
export default VueRouter
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157629.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java下载 文件_Java下载文件的几种方式「建议收藏」

    java下载 文件_Java下载文件的几种方式「建议收藏」1.以流的方式下载.publicHttpServletResponsedownload(Stringpath,HttpServletResponseresponse){try{//path是指欲下载的文件的路径。Filefile=newFile(path);//取得文件名。Stringfilename=file.getName();//取得文件的后缀名。Strin…

  • 深信服scsa知识点一「建议收藏」

    深信服scsa知识点一「建议收藏」1.AH51端口ESP50端口2.IPSEC能加密经过NAT转换的报文,但是不能验证经过NAT转换的报文,在穿越NAT时IKE协商的IP地址和端口不匹配3.非对称加密,使用其中一个密钥加密后只能使用另一个密钥解密4.加密和解密是对数据进行的某种交换,加密和解密的过程都在密钥的控制下完成的5.SANGFORVPN建立总部与分支的VPN类型,需要使用虚拟IP6.标准IPSEC中,启用DPD(对等体死亡检测)可以防止VPN隧道黑洞7.对于IPv4,IPSEC是可选的,对于IPv6,IPSEC是强

  • 什么是Web Service(SOAP)?

    什么是Web Service(SOAP)?SOAP请求(SimpleObjectAccessProtocol,简单对象访问协议)是HTTPPOST的一个专用版本,遵循一种特殊的XML消息格式,Content-type设置为:text/xml,任何数据都可以XML化。SOAP:简单对象访问协议。SOAP是一种轻量的,简单的,基于XML的协议,它被设计成在web上交换结构化的和固化的信息。SOAP可以和现存的许多因特网协议和格式结合…

  • java卸载dll,如何在java中卸载Dll?[通俗易懂]

    java卸载dll,如何在java中卸载Dll?[通俗易懂]IhavewrittenaJavaagentinLotusNotes8.5toresettoken’sPINusingIAIKPKCS11wrapper.Whentheagentisloadedforthefirsttimeitworkedfine.ButafterIcloseandrestarttheagentthenitf…

  • currentstyle 织梦_织梦arclist标签支持高亮currentstyle属性方法

    currentstyle 织梦_织梦arclist标签支持高亮currentstyle属性方法找到include/taglib/arclist.lib.php第一步:查找:$channelid=$ctag->GetAtt(‘channelid’);替换:$channelid=$ctag->GetAtt(‘channelid’);$currentstyle=$ctag->GetAtt(‘currentstyle’);第二步:查找:$ct…

  • nginx做正向代理_正向代理和反向代理图

    nginx做正向代理_正向代理和反向代理图环境在一个网络环境中,只有一台服务器可以使用互联网,而其他内网服务器都可以访问到这台互联网服务器,于是,我们可以通过nginx的正向代理访问互联网地址此处举例:互联网服务器IP:192.168.1.100内网服务器IP:192.168.1.101部署安装包:nginx-1.20.2.tar.gzproxy_connect模块:gitclonehttps://github.com/chobits/ngx_http_proxy_connect_module.git操…

    2022年10月21日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号