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

vue里面的路由方式区别

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

今天和朋友们分享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、请问如何修改无线路由器信道呢? 3、路由器当中怎样切换信道 4、路由器的信道怎么改 路由器如何更换信道 新一代...

pc单机路由器怎么管理

pc单机路由器怎么管理

针对pc单机路由器怎么管理这个问题,本文将综合不同朋友对这个用电脑怎么管理路由器的知识为大家一起来解答,希望能帮到大家 本文内容目录一览:以上就是pc单机路由器怎么管理的全部内容了,文章比较长感谢您的耐心阅读,希望能帮到您,...

连接路由器怎么重置密码

连接路由器怎么重置密码

本篇文章给大家谈谈连接路由器怎么重置密码,以及路由器忘记连接密码如何重置对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文内容目录一览: 1、怎么重置路由器密码 2、路由器怎么重置密码 3、路由器怎么重新设置密码 4、路由器怎样重新设置wifi密码 怎么重置路由器密码 重置方...

路由器插入硬盘怎么读取

路由器插入硬盘怎么读取

有很多朋友不知道路由器插入硬盘怎么读取要如何操作,今天为大家整理了很多路由器插上硬盘怎么用相关的答案,组成一篇内容丰富的文章,希望能到您 本文内容目录一览: 1、如何读取 路由器上USB口的 u盘 或移动硬盘 2、无线路由器连接移动硬盘方案! 3、如何访问无线路由器上的移动硬盘 4、小米...

路由器布置房间怎么设置

路由器布置房间怎么设置

有很多朋友不知道路由器布置房间怎么设置要如何操作,今天为大家整理了很多如何设置房间的路由器相关的答案,组成一篇内容丰富的文章,希望能到您 本文内容目录一览: 1、装修时路由器要怎么布置? 2、路由器如何设置全屋Wi-Fi 3、路由器换房间怎么设置 4、酒店房间如何设置路由器? 5、家...

共享云路由器怎么使用

共享云路由器怎么使用

针对共享云路由器怎么使用这个问题,本文将综合不同朋友对这个共享云路由器怎么使用的知识为大家一起来解答,希望能帮到大家 本文内容目录一览: 1、如何使用TP-LINK ID远程管理云路由器 2、TP-Link云路由器怎么设置 3、台达云路由器的设置方法 如何使用TP-LINK ID远程管理云...