vue路由跳转的的几种方式

2022-08-27 15:01:57 阅读：199 来源： 互联网

标签：vue name router query 跳转 push path id 路由

通常情况下如果只是已经写好功能的页面且通常不需要再发送请求拿数据就可以直接使用这个

不带参数

<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name

当然也有需要携带参数的场合

params 或者query

<router-link :to="{name:'home', params: {id:1}}">

通常情况下分为两个两种情况

有俩兄弟，一个叫query，一个叫parmas

你说他们俩长得也不像吧，可这用法实在是太类似了

这里我们只描述vue路由的情况这两兄弟在很多地方都有很大的区别但是本质都是脱胎于http的两个参数携带方式同样的传递和发起的时候也是这两个携带方式各有作用各有千秋

我们首先用router-link来写

<router-link :to="{ A: 'xxx', query: { xx:'xxx' }}" />
<router-link :to="{ A: 'xxx', parmas: { xx:'xxx' }}" />

两种方式也对应两种不同的路由写法并不是都套上去都完事

`query`：

<router-link :to="{ name: 'W', query: { id:'1234'，age:'12' }}"/>
<router-link :to="{ path: '/W', query: { id:'1234',age:'12' }}"/>

使用query的话两种方式都是可用的

`parmas`：

<router-link :to="{ name: 'W', params: { id:'1234',age:'12' }}"/>

这里只能用name不能用path，不然会直接无视掉params中的内容

同样的你使用了<router-link>的方式跳转也比较接收他们的规则比如

如果你在<router-link>中绑定了规则比如点击等等

哪必须使用@click.native这种方式不然是不会执行里面的操作的当然这个方法本来就有问题我个人就上他们吃瘪了所以我个人非常不推荐使用<router-link>的方式来进行跳转

我们通常使用的是函数的方式

this.$router.push() (函数里面调用)

不携带参数

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

携带参数

query

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

但是貌似使用这种方式激活的点击事件不怎么灵因为我自己的项目的实践中使用到了 this.$router.push({path:'/home',query: {id:'1'}}) 但是这样的情况下参数并没有传递过去

所以我还是只推荐只用name而不使用path

params

this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name

这里只能使用到name

同样的传递了参数要如何引用

一般来说就是

this.route.query.xxx 或者 this.route.params.xxx

这样来调用传过来的参数

同样的两种不同的方式也对应不用的url

在name的模式下基于name设置直接把path添加到url中

{
  path: '/hhhhhhh', //这里可以任意
  name: 'W',  //这里必须是W
  component: W
}

然后就把path匹配添加到url上去

http://localhost:8080/#/hhhhhhh?id=1234&age=12

但是path模式不拐弯抹角

{
  path: '/W', //这里必须是W
  name: 'hhhhhhhh',  //这里任意
  component: W
}

直接基于path模式传递

url:http://localhost:8080/#/W?id=1234&age=12

{
      path:'/W/:id/:age',
      name:'W',
      component:W
}

这里的name与上面router-link中的name保持一致

url就取决于这个path的写法 http://localhost:8080/#/W/1234/12
注意，path里面的/w可以任意写，写成/hhhhh也可以但是！
/:id和/:age不能省略，且不能改名字

不写的话，第一次点击可以实现组件跳转 且可以通过this.$route.parmas.id获取到传过来的id值，但如果 刷新页面，传过来的id值和age值就会丢失

从这也能看出params比query严格

标签：vue,name,router,query,跳转,push,path,id,路由
来源： https://www.cnblogs.com/tomxiao/p/16630550.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue路由跳转的的几种方式

query：

parmas：

this.$router.push() (函数里面调用)

`query`：

`parmas`：