Vue-路由传参的方式

1. query参数

写法和ajax一致，都是url?key=value&拼接查询字符的格式。

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user', component: User }
  ]
})

1.1拼接的形式

//在声明式导航中
<router-link to= "/user?id =1234 & name= '张三"></router-link>
//编程式导航中
this.$router.push("/user?id = 1234 & name = '张三")

1.2对象的形式

//在声明式导航中
<router-link to= "{ path: 'user', query: {id: 1234, name= '张三'} }"></router-link>
//编程式导航中
this.$router.push({ path: 'user', query: {id: 1234, name= '张三'} })

2. params参数

又名动态路由匹配，常用于某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id',name:'user' component: User }
  ]
})

2.1拼接的形式

//在声明式导航中
<router-link to= "/user/123"></router-link>
//编程式导航中
this.$router.push("/user/123")

2.2对象的形式

//在声明式导航中
<router-link to= "{ name: 'user', params: {id: 1234, name= '张三'} }"></router-link>
//编程式导航中
this.$router.push({ name: 'user', params: {id: 1234, name= '张三'} })

注意：因为提供了 path，params 会被忽略，所有要提供路由的 name 或手写完整的带有参数的 path

3.接收参数

this.$route.query.id
this.$route.params.id