「每日一点」vue项目后期添加router注意点

本文主要记录初始化项目忘记添加路由后，手动添加路由的踩坑点。

当然添加路由的流程vue的指导上已经很清晰了，按流程操作，然后配置对应的路由即可，如下图所示。那坑点在哪里呢？

有一点需要注意：就是引入vue-router依赖实在router文件里，然后才创建的文件再在main.js中导入输出。

是不是正确的理解就该可以正常访问你配置好的路由呢？其实不然。

最大的坑点就在于“main.js"中输出router.js文件的时候，我们是不是习惯直接在 vue 实例中直接写入”routers“?切换到前台，一脸蒙蔽的发现报错。。。

其实这个主要是由于vue的路由机制导致的，我们在vue实例中，使用对象属性简写形式加入了自命名的路由属性，但vue需要识别固定属性名router以加载vue-router。

所以解决方式也很简单，直接添加个固定属性”router:routers“,当然也可以直接就以router 作为导入对象然后在实例中输入也是可以的。

另一个需要关注的点就是component的视图层，这个切记不要写成components,不然又得蒙蔽的去查 WHY了；

最后，路由的配置都需要配合router-view使用的，所以在配置路由的时候，记得也要把router-view配置好。

有不正之处，欢迎指正，希望共同进步！