首页IT科技vuerouter的query(VueRouter的两种模式)

vuerouter的query(VueRouter的两种模式)

时间2025-08-24 15:32:16分类IT科技浏览4884
导读:前后端分离:利用Ajax,可以在不刷新浏览器的情况下异步数据请求交互。...

前后端分离:利用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版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
python怎么访问列表中的元素(python访问元组的两种方法) 自己怎么优化网站排名(网站如何做优化排名)