vue页面跳转有两种方式分别是:name和path
this.$router.push({name: 'HelloWorld2})
this.$router.push({path: '/hello-world1'})
传参也有两种方式分别是:params和query
this.$router.push({name: 'HelloWorld2', params:{id:1}})
this.$router.push({path: '/hello-world2', query:{id:2}})
下面放张图来展示路径和参数之间的关系
结论:
使用name跳转可以用params和query传参
当name和query对应的时候也可以跳转并传参,但是路由后面不能加参数名,否则页面会变空白
使用path跳转只能用query传参
如果使用path对应params则数据传输不过去
使用query传参地址栏用?拼接起来的,类似于Ajax中的get请求
{ path: '/hello-world', name: 'HelloWorld2', component: HelloWorld2 }
这是使用query传参的地址栏显示:hello-world?id=2
使用params传参的时候要在路由后面加参数名,(如果不加参数名也可以传递参数,但是页面一刷新参数就丢失了),并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以
{ path: '/hello-world/:id', name: 'HelloWorld2', component: HelloWorld2 }
这是使用params传参的地址栏显示:hello-world/2
讲了传参怎么接受参数呢?
params和query接受参数很类似
this.$route.params.id,
this.$route.query.id,
这里注意使用的是route不是router!
再来补充下使用
<router-link>对应path和name怎么传参
先来看index.js的写法
{ path: '/my-order/:state', name: 'my-order', component: MyOrder, }
path传参:
<router-link:to="{path: '/select-address/0'}"></router-link>
看见了吧,直接在跳转的时候在地址栏拼接上对应的参数即可,
name传参:
<router-link :to="{name: 'my-order', params: {state: 0}"></router-link>
使用name传参的时候就不能在地址栏进行拼接操作,需要写出对应的参数名
接受参数跟上面的都一样