vuerouter的query(VueRouter的两种模式)
前后端分离:利用Ajax ,可以在不刷新浏览器的情况下异步数据请求交互 。
前端路由:匹配不同的url路径 ,进行解析,加载不同组件 ,动态渲染内容 ,不会向后端发出请求 。(VueRouter)
单页应用SPA(只有一个html文件) ,页面交互和页面刷新都是无刷新的 。前后端分离+前端路由来实现 。
VueRouter有两种模式:Hash模式 、History模式 ,默认是Hash模式 ,可以通过mode属性进行设置 。
mode history对象创建依据的类 hash new HashHistory(this, options.base, this.fallback) history new HTML5History(this, options.base) abstract new AbstractHistory(this, options.base)一 、Hash模式
Hash模式是VueRouter的默认模式 ,工作原理是利用hashchange事件监听hash的变化 ,即#xxx ,然后通过 。可以在window对象上监听这个事件 。
window.onhashchange = function(event){ // event.oldURL 表示原来的URL ,有#则含#及其后字符串 // event.newURL 表示现在的URL,有#则含#及其后字符串 }HashHistory构造函数:
HashHistory.push() // 将新路由添加到浏览器历史访问栈
HashHistory.replace() // 将浏览器历史访问栈栈顶路由替换成新路由
由于hash变化的URL都被记录在浏览器历史访问栈 ,尽管浏览器没有访问服务器 ,但页面内容和URL一一对应,可以使用浏览器的前进和后退功能 。
触发hashchange事件的几种情况如下:
1. 浏览器的前进 、后退操作会触发window.location.hash的变化 ,从而触发hashchange事件 。
2. 当只改变浏览器地址栏URL的哈希值 ,此时回车,浏览器不会发送任何请求给服务器 ,只会触发hashchange事件。
3. 当在浏览器地址栏URL中输入一个包含hash的url ,此时回车 ,浏览器会发送除hash外的地址请求给服务器 ,请求完成 ,设置hash值 ,触发hashchange事件 。
4. 标签<a>的href属性可以设置为页面某元素的ID(如#top) ,点击跳转到该ID元素所在区域 ,同时浏览器自动设置window.location.hash属性 ,地址中的hash也会变化成其ID(如#top),触发hashchange事件 。
二 、History模式
Hash模式的缺点:
1. hash本来用于做页面定位 ,若用来做路由 ,原锚点公共失效。
2. Hash模式的传参基于url,若有复杂的数据会有体积的限制 。History模式除了可以利用url传参 ,还可以将数据存放一个特定的对象中 。
3. 路径书写不简约。
History模式的书写更加简洁 ,去掉# 。充分利用HTML5 History Interface中新增的pushState()和replaceState()方法,这俩个方法应用于浏览器的历史记录栈(window.history指向History对象 ,表示当前窗口的浏览历史) ,使得不刷新页面改变url地址 。在已有的back() 、forward() 、go()(接受一个整数作为参数 ,若参数超过实际存在的网址范围 ,该范围无效果;若不指定参数 ,默认参数为0 ,相当于刷新页面)的基础上 ,提供了对历史记录修改的功能 。
前进和后退操作时都不会请求服务器 ,而是通过popstate事件监听 ,刷新页面才会向服务器发起请求 。
2.1 History.pushSate()
用于在浏览器历史访问栈中添加一条记录,该方法不会刷新页面 ,只是导致History对象发生变化 ,地址栏会发生变化 。使用该方法后,可以用History.state读出状态对象 。
History.pushSate(object, title, url)
object:一个对象 ,通过pushState方法可以将该对象内容传递到新页面中 ,若不需要,填null 。
title:标题 ,几乎没有浏览器支持该参数 ,传一个空字符串 。
url:新的网站 ,需与当前页面处于同一个域 。不指定默认为当前地址。若设置跨域地址 ,会报错 。
若在url中设置#xxx ,不会触发hashchange事件 。
2.2 History.replaceSate()
用于修改History对象的当前记录 ,用法同History.pushSate(object, title, url)。
2.3 popstate事件
仅仅调用pushSate()或replaceState()方法 ,不会触发该事件 。
只有用户点击浏览器前进和后退 ,或使用脚本调用history.back() 、history.forward() 、history.go()方法才会触发popstate事件 。
该事件仅针对同一个文档 ,若浏览历史的切换,导致加载不同的文档 ,该事件也不会触发。
第一次加载不会触发popstate事件 。
其回调函数的参数为event对象 ,state属性指向pushSate()和replaceState()方法提供的History的当前对象,也可以通过history.state获得该对象 。
当页面刷新时 ,需要向服务器发起请求 。History模式的url会全部传给服务器 ,即服务器需要匹配完成的URL,否则报404错误 ,需要后端配置路由 。Hash模式的url的哈希值不会携带在请求中 。
三 、使用路由模块实现页面跳转的方式
1. 修改地址栏
2. this.$router.push(路由地址)
3. <router-link to="路由地址"></router-link>
四、Hash模式和History模式的相同点和不同点
相同点:
1. 都是VueRouter的模式配置选项 。
2. 都可以用作SPA(单页面应用)的实现 ,实现前端路由 ,不向服务器发起请求 ,动态渲染页面 。
不同点:
1. Hash模式需要#xxx(哈希值) ,History模式书写更简约 。
2. Hash模式是通过window对象监听hashchange事件 ,根据hash值的变化来动态渲染页面的;History模式是通过window对象监听popstate事件 ,当浏览器前进和后退时 ,获取当前history对象状态即history.state来动态渲染组件 。
3. Hash模式创建history对象是依赖HashHistory构造函数;History模式创建history对象是依赖HTML5History构造函数。
Hash模式利用HashHistory.push()和HashHistory.replace()可以将hash变化的URL都被记录在浏览器历史访问栈 ,实现页面内容和URL一一对应,从而可以使用浏览器的前进和后退功能 。
History模式利用HTML5History.pushState()和HTML5History.replaceState()修改页面的url地址 ,修改history对象的状态 ,而不刷新页面 。
4. Hash模式通过携带在url中传递参数;History模式既可以通过携带在url中传递参数,也可以将数据存放在一个特定的对象中。
5. Hash模式只有hash值设置为不同于上次时 ,才会被添加进历史记录栈;History模式可以记录相同的url 。
6. Hash模式只能修改#之后的部分;History模式的pushState设置的新的url可以是于当前url同源的任意url 。
创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!