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

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

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）