Vue-Router的params和query传参的使用和区别

1.首先简单来说明一下$router和$route的区别

• $router : 是路由操作对象，只写对象
• $route : 路由信息对象，只读对象

//路由跳转分为编程式导航和声明式导航
//编程式路由跳转
this.$router.push({name:'hello',params:{name:'word',age:'11'}
})
//声明式路由导航
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
//路由map配置
routes:[{path:'/index',component:index},{path:'/category/:id',//如果是query传参的话后面就不要加id了component:category}
]//读取 路由参数接收
this.name = this.$route.params.name;

 2.query传参

//使用name跳转
this.$router.push({name:'second',query: {name:'user'}
})
//使用path跳转
this.$router.push({path:'second',query: {name:'user'}
})//query传参接收
this.queryName = this.$route.query.name;

3.params传参

使用params传参只能使用name

//params传参 使用name
this.$router.push({name:'second',params: {id:1,}
})//params接收参数
this.id = this.$route.params.id ;

总结：

1.params只能通过name来实现跳转，query可以通过name跳转也可以通过path跳转；

2.params配置路由的时候需要参数，否则会路由丢失，而query不需要配置路由参数，每次刷新都不会丢失；

3.路由取值：this.$route.params.属性名