vue路由跳转的的几种方式

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

不带参数

<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