[vue]vue路由传参

日常踩坑：路由传参
今天需要做vue中两个页面之间跳转并且需要传递参数从第一个页面到第二个页面，然后开始了踩坑之旅；
假设从A页面跳转至B页面：
第一种：query传参：
A页面传递参数：

handleEdit(index,row){
    if(index==0){
       return false;
    }else{
     this.$router.push('/schoolDetails'+'/'+row.name);
    }
  },

B页面接收参数：

let areaName = this.$route.params.name;

你以为这样就能直接成功了吗？    NO！！！！！！！！！！！
这样做的前提是你要在路由中写入：

path: '/schoolDetails/:name'

第二种params传参：
A页面传递参数：

handleEdit(index,row){
     if(index==0){
        return false;
     }else{
     this.$router.push({
       path:'/schoolDetails',
       params:{
         areaName:row.name
       }
     })
     }
   },

B页面接收参数：

let areaName = this.$route.params.areaName;

你以为这样就能直接成功了吗？    NO！！！！！！！！！！！
为什么呢？
因为params传参只能支持name方式，不能使用path进行传参，所以路由中需要是

{
            path: '/schoolDetails',
            name: 'schoolDetails',
            meta: {
                requireAuth: true
            },
            component: schoolDetails
        }

然后A页面传参需要是：

handleEdit(index,row){
      if(index==0){
         return false;
      }else{
      this.$router.push({
        name:'schoolDetails',
        params:{
          areaName:row.name
        }
      })
      }
    },

这样就OK了。

补充一句：params传参，页面刷新就会造成参数丢失，使用query方式传参则不会