Vue路由传递参数

在Vue中路由传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式

1.params 传参（显示参数）分为 声明式 和 编程式

声明式router-link：该方式是通过router-link组件，通过to属性实现跳转，目标路由提前配置好参数。

<router-link :to="/login"> 跳转到login页面 </router-link>

// 在路由js文件中 routes属性下配置路由
{
 path: '/login:id',
 component: login
}

编程式 this.$router.push：同样目标路由提前配置好参数。

// 在路由js文件中 routes属性下配置路由
{
 path: '/login:id',
 component: login
}

//模板字符串写法
this.$router.push({
  path:`/login/${id}`,
})

// 对象写法
this.$router.push({
   id: "1",
   params:{key: value},
   query:{key: value}
})

使用 $route.params.id 接收参数

2. params传参（不显示参数）同样可分为声明式和编程式两种方式,通过路由的别名 name 进行传值的

<router-link :to="{name:'Login',params:{id:1}}">路由跳转</router-link>

配置路由

{
 path: '/login,
 name: 'Login',
 component: Login
}

传参

this.$router.push({
  name:'Child',
  params:{
   id:1
  }
})

使用 $route.params.id 接收参数

3.query 传参（显示参数）也可分为声明式和编程式 两种方式

声明式router-link: 目标路由提前配置好路由别名

{
 path: '/login,
 name: 'Login',
 component: Login
}

<router-link :to="{name:'Login',query:{id:1}}">路由跳转</router-link>

编程式 this.$router.push：使用该方式传值的时候，目标路由提前配置好路由别名（name 属性）

{
 path: '/login,
 name: 'Login',
 component: Login
}

this.$router.push({
  name:'Login',
  query:{
   id:1
  }
})