Vue中router-link路由跳转以及传参方式

·  阅读 133

博主相关个人技术博客、微信公众号、视频号、设计作品集


1、query的方式

<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>
复制代码

使用:this.$route.query.id

地址栏: http://localhost:8081/#/test?name=1

2、 params的方式

<router-link :to="{name:'/test',params: {id: id}}">跳转</router-link>
复制代码

使用:this.$route.params.id

地址栏: http://localhost:8081/#/test/12345

配置路由:

{
  path: '/test/:id',
  component: testingCenter,
  meta: { title: '检测中心' }
}
复制代码

传参:

<router-link :to="'/test/'+id">跳转</router-link>
复制代码

使用:this.$route.params.id(这个id给上图路由的配置有关)

地址栏:http://localhost:8081/#/test/1


微信公众号: 情非得已小猿猿(FrontendApe)

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改