一、Vue路由传参
Vue Router是Vue.js官方提供的路由管理器，它能够非常方便地实现路由的切换，同时也支持路由参数传递。Vue Router支持通过URL传递参数和通过组件属性传递参数两种方式。
二、Vue路由传参的方式
Vue路由传参主要有三种方式，分别是：params传参，query传参，props传参。
三、Vue路由传参的几种方式
1. params传参
通过params传参方式，可以直接在路由地址后面添加参数，这些参数将被作为$route.params对象的属性存在，参数传递的方式是通过冒号（:）替换为params属性，具体代码如下：
// 路由配置
{
path: '/page/:id',
component: Page
}
// 页面跳转
this.$router.push('/page/123')
// 页面接收参数
this.$route.params.id // 123
2. query传参
通过query传参方式，可以直接在路由地址后面添加参数，这些参数将被作为$route.query对象的属性存在，参数传递的方式是通过问号（?）加上参数名和参数值，多个参数以&分隔，具体代码如下：
// 路由配置
{
path: '/page',
component: Page
}
// 页面跳转
this.$router.push('/page?id=123&name=test')
// 页面接收参数
this.$route.query.id // 123
this.$route.query.name // test
3. props传参
通过props传参方式，可以在路由组件中直接使用props属性接收参数，具体代码如下：
// 路由配置
{
path: '/page',
component: Page,
// 将路由参数映射到组件的props中
props: route => ({ id: route.query.id })
}
// 页面跳转
this.$router.push('/page?id=123')
// 页面接收参数
props: ['id']
四、Vue3路由传参
Vue3与Vue2在路由传参方面没有太大区别，仍然支持params传参、query传参和props传参三种方式，具体使用方式也相同。
五、Vue路由传参数的类型
在Vue路由传参时，可以传递任意类型的参数，包括基本类型（Number、String、Boolean等）以及引用类型（Object、Array等），具体代码如下：
// 路由配置
{
path: '/page/:id',
component: Page
}
// 页面跳转
this.$router.push({ path: '/page/123', query: { name: 'test' }, params: { obj: { key: 'value' } }})
// 页面接收参数
props: ['id'],
created() {
console.log(this.$route.params.id) // 123
console.log(this.$route.query.name) // test
console.log(this.$route.params.obj.key) // value
}
六、Vue路由传值
Vue路由传值的本质是通过路由参数传递数据，为了方便起见，我们可以将目标组件中需要使用的路由参数通过props方式提前声明，然后在父组件中通过$route对象进行传递，具体代码如下：
{{ id }}
原创文章，作者：NFVE，如若转载，请注明出处：https://www.506064.com/n/135342.html
