Vue编程式导航传递参数的两种方式

通过查询参数传递（query传参）

1、第一种不使用路由中的name属性

// 定义带有查询参数的路由
{
  path: '/user',
  component: User
}

查询参数是通过URL中的问号（?）和键值对的形式传递的参数。
例如：我们要向User页面传递一个参数'id=123'
如果参数较多：

// 编程式导航传递查询参数
this.$router.push({ 
path: '/user', //存放跳转路径
query: {  
 id: 123    //存放参数
 } 
})

如果参数较少可以简写为：

// 编程式导航传递查询参数
this.$router.push('/user?id=123')

在组件中，可以通过$route.query来获取查询参数的值。例如：

// 在组件中获取查询参数
this.$route.query.id

2、 第二种使用路由中的name属性

// 定义带有查询参数的路由
{
  path: '/user',
  name:'user'
  component: User
}

只能写成 （没有简写）

// 编程式导航传递查询参数
this.$router.push({ 
name: 'user', //存放跳转路径
query: {  
 id: 123    //存放参数
 } 
})

通过路由参数传递(params传参)

1、第一种不使用路由中的name属性

在定义路由时，可以设置路由路径中的参数部分，使用冒号（:）来标记参数。
例如：我们要向User页面传递两个参数'id=123'userName='张三'’

// 定义带有参数的路由
{
path: '/user/:id/:userName',//使用冒号定义参数名
component: User,
}

可以写成

this.$router.push({
path:'/user/123/张三'  //直接在路径中写参数的值即可，注意先后顺序对应
})

也可以简写为：

this.$router.push('/user/123/张三')

在组件中，可以通过$route.params来获取路由参数的值。例如：

// 在组件中获取路由参数
this.$route.params.id

// 在组件中获取路由参数
this.$route.params.userName

2、使用name属性

格式为：

// 编程式导航传递参数
this.$router.push({
 name: 'user',
  params: {
   id: 123
    } 
    })