vue路由传参以及接收参数的几种方法

vue路由传参方式可以划分为params传参、query传参和url字符串拼接,首先需要知道路由跳转并传参的方式(声明式导航和编程式导航)以及接收路由参数的方法

一、路由跳转并传参的方法

1、声明式导航

不带参跳转 对应的地址为/foo

<router-link to="/foo">Go to Foo</router-link>

url字符串拼接传参 对应的地址为/foo?id=123

<router-link :to="{path:'/foo?id=123'}">Go to Foo</router-link>

query方式对象形式传参 对应的地址为/foo?id=123

<router-link :to="{path:'/foo',query:{id:123}}">Go to Foo</router-link>

params方式对象形式传参 对应地址为 /path/123 , 注意params和query一起使用params会失效，params与name一起使用

<router-link :to="{name:'/foo',params:{id:123}}">Go to Foo</router-link>

2、编程式导航(路由实例对象router=new VueRouter())

字符串

router.push('home')

对象

router.push({ path: 'home' })

命名的路由 对应路径为/path/123

router.push({ name: 'user', params: { userId: '123' }})

带查询参数，变成 /register?plan=123

router.push({ path: 'register', query: { plan: '123' }})

二、接收路由参数的方法，分 ? 和 : 两种接收方式

$route是路由信息对象

1、?形式的参数使用this.$route.query接收参数，结果是一个对象

2、:形式的参数使用this.$route.params接收参数，结果也是一个对象