我想做一个单页面路由跳转的功能，希望实现的是：在我页面的导航栏上有两个url，一个叫首页，一个叫精准传播（为什么叫精准传播不重要）。当我点击首页的时候，下方显示的是首页的内容；当我点击精准传播的时候，下方显示的是精准传播的内容。先上效果图：
其实功能很简单，我看官网demo的时候，也觉得很简单，事实上真的不难。只是步骤没有走错就行。放下我错误时的图：
下面空空如也，没有像我想象中出现内容，并且发生改变。
附上我的代码，没什么复杂的东西。
Header.vue ： 导航栏的内容
index.vue, jzcb.vue : 点击后显示的内容，都没什么内容好吧
App.vue ：根组件，东西也不多，第4行加载Header组件，第5行渲染index和jzcb组件，当导航栏链接被点击的时候。
route.js: 路由文件，定义了具体路径去调用具体的组件，也没太多东西。一开始以为这一块出了问题，其实不是。不过还是有点细节的。
main.js : 入口文件，初始化Vue实例，并且配置响应的插件。之前这里写错了，所以效果没出来，那时找错方向，百思不得其解。
先说说我最后怎么解决的吧。上面的这些图，其实主要还是看main.js ，上面的main.js的代码是错的，17行是错误的写法。15，16行注释掉的才是正确的写法。
routermap 是我将route.js导出的路由内容的别名。
一步一步来。首先，我在路由文件里怎么写的：
export default [ ......(中间内容省略) ]，default 后用的是[ ],说明我导出的是一个列表。之前看项目代码的时候，很多时候用的都是{ }，如 export default{ ...... },这种导出的应该是一个对象，里面一般是 Key:value 类型。我之前没怎么注意到这点，一直以为只有export default{ }这种写法，这惯性很可怕，很致命，很多东西太想当然就完了。总之，我们导出的路由是个列表。
接着看main.js 第17行，其实这样写，最后相当于是这样的：
const router =new VueRouter({ [......(我的路由配置)] })
但是这是错的，因为我们要里面要传的是一个Key:Value ,而不是一个列表。所以上面那样写，路由不生效，自然没办法找到对应的组件，没办法渲染出下面的内容来啦。
那个Key一定要是routes,Value就是你的路由列表嘛
所以，
1，可以这样写 const router =new VueRouter({ routes: [......(我的路由配置)] })
2，像我注释掉那两行那样，先用 导出的列表赋给一个常量，然后将该常量传入VueRouter中。
当然，Vue实例中的router也不能忘加进去，不加进去效果也出不来。.
当然，我后面也有疑惑过，new VueRouter({ [......(我的路由配置)] })和
new VueRouter({ ...(赋值后的常量) })，这样写怎么就不同了，就算将列表赋值给那个常量，那它应该也还是列表啊。但后面那种就行得通。官网Demo里是这样说的：就是用上面第二种的时候，默认就是 new VueRouter({ routes:你赋值后的常量 })，所以其实这样也就和第一种是一样了。
虽然例子很简单，但是写的时候没经验，很多细节没注意到。所以写少了点什么，或者哪里写错了都要找很久。甚至不知道去哪里改正。
一开始我觉得我路由的配置没错啊，跟demo差不多，所以应该是其他文件的问题吧。其他文件写的也都差不多，应该可以的啊。差不多，是差得不多。可是哪怕差了那么一点点都是跑不出自己想要的效果的。前面一直怀疑是App.vue里的router-view用错了或是写错了，导致它没渲染。最后才发现是配置路由是没写对，匹配不到。
直到刚才，我才发现了我的真正的错误原因。早上在公司的时候，弄成功了，因为好像在index组件中加了export default{ name:'index'},然后就可以了，就以为是没加这个的原因。但是其实还是错误的，只是路由配置误打误撞给我不小心改对了而已。直到晚上，刚好又弄了一次，早上那次是在公司弄的，有成功。晚上这次的代码是昨晚的，还是不成功的版本，我按照早上以为的错误原因给改正了后，发现还是没卵用。又排查了一遍，改正后，才发现原因。
