vue路由传参的两张方式以及区别query和params

路由配置index.js

export default new Router({
  routes: [
    {
      path: '/index',
      name: 'index',
      component: index,
      meta: {
        title: "首页"
      }
    },

1. query方式

   // 传递参数
   this.$router.push({
     path: `/index?id=${this.id}`,
   });
   // 接收参数
    id: this.$route.query.id
   

2. params方式

   // 传递参数
   this.$router.push({
    name: "index",    // params传参必须name
    params: {
       sex: this.sex,
      	area: this.area
     }
   });
   // 接收参数
   sex: this.$route.params.sex
   area: this.$route.params.area
   

注意：
query方式传参要用path来引入，params方式传参要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。