实力填坑之vue-router引起的params为空

首先，建议所有使用vue-router的小伙伴们，在router>index.js文件中定义组件的路由时，不要贪图省事，除了添加path，顺手也请把name写上，来跟大家分享一下我遇到的神坑。
一开始，我的路由是这么写的：

<script>
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
   {
      // 组件A
      path: '/acomponent',
      component: resolve => require(['@/components/acomponent'], resolve)
    },
   {
      // 组件B
      path: '/bcomponent',
      component: resolve => require(['@/components/bcomponent'], resolve)
    },
})
</script>

(PS: 为了讲重点，我这里做了一下简化，但要分享的内容不会改变)

大家可以看到，我的组件这么引入，并且path也完成了定义。确实省事，不写name属性，其实也不会影响你跳转页面。好的，问题来了，假如我是简单的this.$router.push({path: '/acomponent'})，name完全没问题。
但假如我想传参数呢？For example：

// 某页面：
this.$router.push({
    path: '/acomponent', 
    query: {name: ''张三}    // 传递参数
});

//  A页面：
console.log(this.$route.query);  // {}

看到了吗？打印出来是一个空对象！这里怎么解决呢？很简单把路由中path对应的地址首字母大写即可，这样：

export default new Router({
   {
      // 组件A
      path: '/Acomponent',    // 这里改成大写的A
      component: resolve => require(['@/components/acomponent'], resolve)
    }
})

那你就可以打印出{name: '张三'}了。这就完了吗？还没完！为啥？因为query传参是通过url传的，这样信息会暴露，所以你就会开始考虑用params替代query传参。但大家都知道，如果要用params，就需要用name取代path，否则是无法传参的，所以就回到了我开头跟大家讲的：不要图省事，老老实实在定义路由时，把name也写上，这样你后期处理就比较方便：

export default new Router({
   {
      // 组件A
      path: '/Acomponent',    // 这里改成大写的A
      name:  'Acomponent',    // 这里请首字母大写！！！
      component: resolve => require(['@/components/acomponent'], resolve)
    }
})

这里我就不饶弯路跟大家讲了，name的值也请大家尽量大写，否则会出现啥情况呢？正常跳转是ojbk的，但如果要用params传参，就会碰到刚刚query的问题，获取到的是：

console.log(this.$route.params);  // {}

分享我的踩坑心得，希望对大家有帮助！