单页面路由跳转失败，router-view不起作用？

    我想做一个单页面路由跳转的功能，希望实现的是：在我页面的导航栏上有两个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'},然后就可以了，就以为是没加这个的原因。但是其实还是错误的，只是路由配置误打误撞给我不小心改对了而已。直到晚上，刚好又弄了一次，早上那次是在公司弄的，有成功。晚上这次的代码是昨晚的，还是不成功的版本，我按照早上以为的错误原因给改正了后，发现还是没卵用。又排查了一遍，改正后，才发现原因。

终于写完了，也有点不容易。第一次写博客记录遇到的 坑，以后也会继续记录下去。写得挺烂，挺难看的。哈哈。可能有说的不对的地方。欢迎指正喔。写毕，睡觉。