虽然Vue3还没有正式发布，但是热爱新技术的我久久按捺不住心，开始尝试使用它在小项目中。根据这篇《今日凌晨Vue3 beta版震撼发布，竟然公开支持脚手架项目！》，我搭建了一个Vue3脚手架项目。这样搭建的脚手架项目不仅是新版本的vue，而且是最新版本的vue-router和vuex。给大家截图package.json：可以看到vue-router和vuex都开启了4.0时代！但其实我并没有了解vue-router4.0的新用法，因为我觉得它不像vue3.0，一直是beta版本，不会有特别大的变化。而且vue-router4.0还在alpha阶段，所以我觉得现在学习还为时过早。但仅此而已！差点演变成一场悲剧。老版本vue+vue-router的使用方式如果在路由中定义一个动态参数，一般是这样写：{path:'/:id'}然后在使用程序化导航的时候，一般是这样写它是这样的：this.$router.push('/123')在组件中获取这个参数是这样的：this.$route.params.id我认为使用新版本的vue+vue-router因为没有这在vue3.0的CompositionAPI中，所以我想通过获取组件实例来获取$route：()console.log(ctx.$route)})没想到，打印出来的值是undefined！这里发生了什么？于是又打印了ctx（ctx是当前组件上下文）：那些没有$的字段是我在组件中定义的变量，那些带有$的变量是内置的vue。找了半天发现没有$route了，现在只剩下一个$router了。估计vue-router4.0会将当前的路由信息??传递给$router。带着猜测，我点击了$router:currentRoute!看名字，应该是吧！所以我：import{defineComponent,getCurrentInstance}from'vue'exportdefaultdefineComponent((props,context)=>{const{ctx}=getCurrentInstance()console.log(ctx.$router.currentRoute.value.params.id)})果然，我明白了！很高兴！新版vue+vue-router的实际使用在下面的过程中，我用ctx.$router替换了原来的this.$router，用ctx.$router.currentRoute.value替换了原来的this。＆;路线。虽然后面的进度没有出现BUG，但是程序一直在按照我的设想运行。但是项目打包后出现了意想不到的bug：跳路由的时候报错没有pushonundefined。奇怪了，程序在开发阶段没有报错，怎么打包就失败了呢？依靠多年的开发经验，我很快定位到了vue-router的错误。这样写有错吗？但是我打印了ctx，里面明明有$router，$router里面有currentRoute，currentRoute里面有value，value里面有params，params里面有params。参数：可能是vue-router的bug。果然alpha阶段的产品不靠谱。开始后悔使用新版的vue脚手架项目了。vue-router中的Hooks不过这个时候，突然灵光一闪。vue3不是受reacthooks的启发产生了CompositionAPI吗？那么估计vue-router肯定会受到react-router的启发吧！还好我学会了react，真的不至于被这么多技能压垮！估计里面肯定有useXxx，像这样：import{useXxx}from'vue-router'那么应该用什么？按理说，我们应该尽量和之前的API保持一定的联系。我猜应该是useRoute和useRouter吧！为了验证我的想法，我打开node_modules，找到了vue-router的源码：果然，在2454和2455行，我发现它导出了useRoute和useRouter，原来如此：import{defineComponent}from'vue'import{useRoute,useRouter}from'vue-router'exportdefaultdefineComponent(_=>{constroute=useRoute()constrouter=useRouter()console.log(route.params.id)router.push('/xxx/xxx')})使用该方法不仅可以成功跳转到路由，还可以获取路由传递的参数。这次又尝试打包，果然没有之前的错误了。结语估计未来的vue全家桶将开启全民hooks时代。在查看源码的时候，发现他们在vue-router/playground文件夹下写了一些例子，我在里面发现了一些有趣的用法。.如果我有时间，我会仔细研究并为您发布更深入的文章。当然如果有等不及我发新文章的朋友可以直接进入vue-router-next的github地址：https://github.com/vuejs/vue-router的例子-next放在playground文件夹中。期待你看懂后更深入的文章！
