vue路由实现原理总结

1.vue路由的两种模式

hash模式：
比如 'http://www.baidu.com/#/abc'  hash 的值为 '#/abc'
它的特点在于：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，因此改变 hash 不会重新加载页面
但是会触发 onhashchange 事件，所以我们可以监听，然后渲染自己要渲染的组件，达到路由的效果history模式：
通过 HTML5 中新增的 pushState() replaceState() 方法
应用于浏览器的历史记录，在已有的 go()，back()，forward() 的基础之上，它们提供了对历史记录进行修改的功能
当它们执行修改时，虽然改变了当前的 URL，但你浏览器不会立即向后端发送请求
我们可以通过 onpopstate 事件，监听 history 的变化，然后渲染自己要渲染的组件，达到路由的效果

2.pushState和replaceState的用法

history.pushState(state, title, url)
// 作用：将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新
// state：与要跳转到的URL对应的状态信息
// title：新页面的标题，但是所有浏览器目前都忽略这个值
// url：要跳转到的URL地址，不能跨域history.replaceState(state, title, url)
// 作用：pushState的区别就在于它不是写入而是替换修改浏览历史中当前纪录，其余和 pushState一模一样

3.实现原理

<div><h2>history</h2><a class="history">home1</a><a class="history">about1</a><h2>hash</h2><a class="hash">home2</a><a class="hash">about2</a>
</div>

window.onload = function(){// history  注册路由document.querySelectorAll('.history').forEach(item => {item.addEventListener('click', e => {e.preventDefault();let link = item.textContent;window.history.pushState({name: 'api'}, '', link);})});// 监听路由，popstate监听history变化，可以使用history.go() history.forward()使history变化，触发事件window.addEventListener('popstate', (e) => {console.log({location: location.href,state: e.state})});// hash  注册路由document.querySelectorAll('.hash').forEach(item => {item.addEventListener('click', e => {e.preventDefault();let link = item.textContent;location.hash = link;}, false)});// 监听路由window.addEventListener('hashchange', () => {console.log({location: location.href,hash: location.hash})}, false)}

vue路由实现原理总结相关推荐

vue 路由知识点梳理及应用场景整理
最近做项目才发现,我确实对 vue-router 太不熟悉了,都只了解个简单用法就开始搞了,本来很简单的问题,都搞不清楚.现在重新看一遍文档,重新梳理一下. vue 路由的原理说实话,路由我一直也就 ...
vue页面路由的原理
47. vue页面路由的原理 1. 原理 Vue 中的路由原理是基于浏览器的 history API 和 Vue 的路由插件 Vue Router 实现的. 具体来说,当浏览器接收到一个新的路由请求时 ...
vue路由传参【vue路由原理、区别】
vue的路由传值主要通过 query 和 params 来实现方法1.query query传参就是在url地址后面拼接 ?参数名=参数值优点:通用性比较好,刷新数据不会丢失例如 rourer- ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
Vue的路由实现原理解析（最清晰）
Vue的路由实现原理解析(最清晰) 一般源码中,都会用到 window.history 和 location.hash history 实现 window.history 对象包含浏览器的历史,win ...
VUE路由的工作原理
1.vue路由的两种模式 hash模式: 比如 'http://www.baidu.com/#/abc' hash 的值为 '#/abc' 它的特点在于:hash 虽然出现 URL 中,但不会被包含在 ...
vue路由的模式以及原理区别
⾯试官您好,接下来我给您介绍⼀下 vue 的路由模式,vue 的路由模式⼀共有两种,分别是哈希和 history.他们的区别是 hash 模式不会包含在 http 请求当中,并且 hash 不会重新加 ...
vue路由模式实现原理
vue路由有两种模式(通过改变 URL,在不重新请求页面的情况下,更新页面视图) 一种hash模式(URL有#) 实现原理: 一种history模式(URL无#) 实现原理: 这两种模式区别看有无#
vue路由守卫死循环及next原理解释
在使用vue路由守卫的beforeEach方法时可能会出现无限递归,也就是死循环的问题,根本原因在于next()方法在不合适的地方错误调用所致,先来看一下官方对next()方法的解释: befor ...

vue路由实现原理总结

1.vue路由的两种模式

2.pushState和replaceState的用法

3.实现原理

vue路由实现原理总结相关推荐

最新文章

热门文章