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

vuerouter的query(VueRouter的两种模式)

时间2025-07-04 03:33:17分类IT科技浏览4258
导读:前后端分离:利用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
uni-app web-view(【第二趴】uni-app开发工具(手把手带你安装HBuilderX、搭建第一个多端项目初体验)) 十二届蓝桥杯第三次模拟(【蓝桥杯】第十四届蓝桥杯模拟赛(第三期)C++ (弱go的记录,有问题的话求指点))