当前位置:首页 > wifi设置知识 > 正文内容

vue里面的路由方式区别

秋天2023年01月28日 12:24:12wifi设置知识301

今天和朋友们分享vue里面的路由方式区别相关的知识,相信大家通过本文介绍也能对vue路由的两种模式的区别有自已的收获和理解。自己轻松搞问题。

本文内容目录一览:

vue中路由模式及区别

路由模式默认三种

 1.Hash: 使用URL的hash值来作为路由。支持所有浏览器。

 2.History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式

 3.Abstract: 支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模式。

Hash和History两种路由模式的区别

   最明显的区别就是在地址栏中的#号,history模式下#会消失,hash不会。

相同点:

    1.当URL改变时,页面不会重新加载;

    2.都受页面导航回退前进等影响; 

不同点:

    1.hash模式背后的原理是onhashchange事件,可以在window对象上监听事件。

    2.如果后台没有做相应配置,history页面会在再次刷新的时候,报404;hash则不会出现404报错 

    3.当改变url时,hash不会请求服务器,history会请求服务器。

当使用vue路由模式history时,进行刷新报错404,解决办法?

    1.与后端配合,再刷新时返回首页

    2.在Vue应用里面写出一个覆盖全局的方法和一个404页面。

原文链接:

Vue方向:路由跳转的三大方式以及它们之间的区别

通过将路由压入栈,实现跳转到不同的路由,向history栈添加一个记录,点击后退会返回到上一个页面

这个也是登录页面路由跳转的常用方式之一,这个也是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。

使用这种方式登录进去后,点击浏览器的回退按钮,不会回到上一个页面的。

n为任意数字,为0的话则会强制刷新浏览器

vue-router两种路由模式的区别

即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL: ,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

因此可以说,hash 模式和 history 模式都属于浏览器自身的特性,Vue-Router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由.

Vue Router路由传参三种方法及区别

1、第一种方法:拼接方式:

methods:{

handleClick(id) {//直接调用$router.push 实现携带参数的跳转

 this.$router.push({path: `/detail/${id}`,})

}

对应路由配置:

{

path:'/detail/:id',

name:'detail',

component: detail

} 获取参数方式: this.$route.params.id

2、第二种方法:params传参 (通过路由属性中的name来确定匹配的路由,通过params来传递参数。)

methods:{

handleClick(id) {

this.$router.push({name:'detail', // 根据name确定匹配路由params: {id: id}})

}

//或者采用router-link前往Detail页面

router-link :to="{name: 'detail', params: { id: 1 }}"前往Detail页面/router-link

对应路由配置:

{

path:'/detail/:id',

name:'detail',

component: detail

}  获取参数方式: this.$route.params.id

三、第三种方法:query传参

使用path来匹配路由,然后通过query来传递参数,这种情况下 query传递的参数会显示在url后面?id=?

methods:{

handleClick(id) {

this.$router.push({path:'/detail',query: {id: id}})

}

对应路由配置:

{

path:'/detail',

name:'detail',

component: detail

}  //获取参数:this.$route.query.id

四、总结:params和query中的区别

1、接收方式

query传参:this.$route.query.id

params传参:this.$route.params.id

2、路由展现方式

query传参:/detail?id=1user=123identity=1更多参数

params传参:/detail/123

关于vue里面的路由方式区别和vue路由的两种模式的区别的文章,就是上面的全部内容了,不知道有没有是您需要的内容。如果可以帮到您,记得收藏本站

扫描二维码推送至手机访问。

版权声明:本文由路由设置网发布,如需转载请注明出处。

本文链接:https://www.shoulian.org/luyou/post/4198.html

“vue里面的路由方式区别” 的相关文章

千兆路由器下面怎么安装

千兆路由器下面怎么安装

当朋友们看到这个文章时想必是想要了解千兆路由器下面怎么安装相关的知识,这里同时多从个角度为大家介绍千兆路由器下面怎么安装网线相应的内容。 本文内容目录一览: 1、千兆路由器应该怎么设置 2、TP-LINK TL-WDR7500 1750M 11AC双频千兆无线路由器怎么安装 3、千兆无线路由...

tp路由器远程怎么设置

tp路由器远程怎么设置

本篇文章给大家谈谈tp路由器远程怎么设置,以及tp如何设置路由器对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文内容目录一览: 1、怎么远程设置tp路由器 2、tp-link路由器怎么远程管理 3、怎么使用手机远程管理TP-LINK路由器 4、tplink路由器怎么远程控制...

路由器的好坏怎么判断

路由器的好坏怎么判断

本篇文章给大家谈谈路由器的好坏怎么判断,以及路由器如何判断好坏对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文内容目录一览: 1、怎么看路由器的好坏 2、怎么判断路由器的好坏? 3、如何判断路由器好坏 4、怎样判断无线路由器的信号好坏 5、怎么检验路由器好坏。急 6、...

网与路由器怎么连接

网与路由器怎么连接

有很多朋友不知道网与路由器怎么连接要如何操作,今天为大家整理了很多网络和路由器怎么连接相关的答案,组成一篇内容丰富的文章,希望能到您 本文内容目录一览: 1、联通宽带怎么连接路由器 2、怎么用宽带连接路由器? 3、路由器怎么连接网络 4、刚买的路由器怎么连接啊? 5、路由器怎么连接网...

荣耀路由器wpa怎么设置

荣耀路由器wpa怎么设置

本篇文章给大家谈谈荣耀路由器wpa怎么设置,以及路由器安全设置wpa对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文内容目录一览: 1、华为路由器wps功能怎么用 2、华为路由器wps功能怎么使用 3、荣耀无法开启wps连接怎么办 华为路由器wps功能怎么用 wps可以进行免密...

路由器怎么设置最大带宽

路由器怎么设置最大带宽

本篇文章给大家谈谈路由器怎么设置最大带宽,以及无线路由器带宽怎么设置对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文内容目录一览: 1、路由器怎么设置带宽 2、路由器怎么调高网速 可以有什么方法调整 3、路由器带宽控制怎么设置 4、如何设置路由器增加网速? 路由器怎么设置带...