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

vue里面的路由方式区别

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

今天和朋友们分享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、斐讯k2自己家的,搜出 2.4g 和 5g两个信号应该连哪个? 2、支持padavan性价比高的路由器有哪些 3、求路由器排...

京东路由器怎么开通

京东路由器怎么开通

今天和朋友们分享京东路由器怎么开通相关的知识,相信大家通过本文介绍也能对京东自营路由器有自已的收获和理解。自己轻松搞问题。本文内容目录一览: 1、怎么开启无线路由器 2、京东路由宝没开upnp 3、京东云路由器地址 怎么开启无线路由器 当今是一个离不开网络的时代,电脑、手机、IAPD都要...

怎么查路由器账户余额

怎么查路由器账户余额

当朋友们看到这个文章时想必是想要了解怎么查路由器账户余额相关的知识,这里同时多从个角度为大家介绍怎么查路由器账户余额相应的内容。 本文内容目录一览: 1、宽带的余额是怎么查的 2、怎样查询自己家里的无线网络是否欠费 3、怎么查家里的宽带余额,是否欠费。 4、无线网的余额怎么查询 5、...

路由器怎么接增益天线

路由器怎么接增益天线

当朋友们看到这个文章时想必是想要了解路由器怎么接增益天线相关的知识,这里同时多从个角度为大家介绍路由器怎么接增益天线相应的内容。 本文内容目录一览:关于路由器怎么接增益天线和路由器怎么接增益天线的文章,就是上面的全部内容了,不知道有没有是您需要的内容。如果可以帮到您,记得收藏本站...

路由器要怎么设置啊的简单介绍

路由器要怎么设置啊的简单介绍

针对路由器要怎么设置啊这个问题,本文将综合不同朋友对这个的知识为大家一起来解答,希望能帮到大家 本文内容目录一览: 1、路由器应该怎样设置? 2、路由器怎么设置 3、要怎么设置路由器 4、路由器该怎么设置 5、怎样设置路由器? 路由器应该怎样设置? 路由器购买回来后需要进行设置,然...

水星路由器穿透怎么设置

水星路由器穿透怎么设置

针对水星路由器穿透怎么设置这个问题,本文将综合不同朋友对这个水星路由器的使用方法的知识为大家一起来解答,希望能帮到大家 本文内容目录一览: 1、水星路由器如何设置穿墙 2、水星无线路由器怎么设置? 3、水星无线路由器穿墙王怎么设置 4、水星路由器穿墙模式怎么设置 5、路由器怎么设置穿...