这里我只是设想实际开发中的过程，没有完全从零开始学习 这；
1.template中
2.要在router文件夹里的index.js文件中配置路由：
3.要在main.js中，Vue实例中，加载路由对象（只做了这一次哈，因为index.js中已经把路由对象暴露出去了）
路由对象的暴露：
main.js中加载路由对象：
《1》导入路由对象：
《2》在Vue实例对象中挂载路由对象：
====================================================================================================================
下面是动态路由的匹配：
什么是动态路由匹配？
我们经常需要把某种模式匹配到的所有路由，全部都映射到同一个组件中。例如newsinfo组件，对于所有id各不相同的新闻详情，都要使用这个组件来渲染。那么，我们可以在vue-router的路由
路径中使用 ‘动态路径参数’来达到这个效果：
当匹配到这个路由的时候，参数值会被设置到this.$router.params,可以在每个组件内使用。
这里这个例子中，在NewsInfo组件中：
1.响应路由参数的变化：
当使用路由参数的时候，例如从 /newsinfo/13到 /newsinfo/14，原来的组件实例会被复用。因为这两个路由都是渲染的同一个组件newsinfo，比起销毁再创建，复用显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
2.复用组件时，想要对路由参数的变化做出响应的话，可以使用watch检测$route路由参数对象的变化；
当然还可以使导航守卫；
原文：https://www.cnblogs.com/hou-yuan-zhen/p/11771932.html