这篇文章主要介绍了vue路由篇之router-view内容无法渲染出来问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
- router-view内容无法渲染出来
- Bug记录router-view没有被渲染
- 起因
- 排查
- 错因
router-view内容无法渲染出来
最近在学习vue路由知识，在写到关于 <router-view></router-view>时，内容无法渲染出来，找了许久之后，才发现是一个神坑！！！
配置路由时注意，名字定义为routes 而不是routers 否则你的也内容渲染不出来。
Bug记录router-view没有被渲染
起因
在浏览器控制台查看 router-link 的时候，发现其被正常渲染，然而 router-view 却没有被浏览器渲染出来。
排查
因vue的静态路由文件控制着上述的两个标签，查看代码（../router/index.js）如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import pageOne from '../views/pageOne'
import pageTwo from '../views/pageTwo'
Vue.use(VueRouter);
const routers=[ //错误在这儿（1）
{path:'/pageOne',component:pageOne},
{path:'/pageTwo',component:pageTwo},
{path:'/',component:pageOne}
];
const router=new VueRouter({
routers //错误在这儿（2）
});
export default router
错因
由于在写代码时，习惯性的将路由写成 routers ，而原本这里应该写成 routes，只是一个字母 r 之差。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- Vue条件渲染与列表渲染
- vue脚手架配置预渲染及prerender-spa-plugin配置方式
- vue-cli3.0如何使用prerender-spa-plugin插件预渲染
- Vue查询数据并通过bootstarp table渲染数据
- vue实现动态表单动态渲染组件的方式(2)
- Vue渲染失败的几种原因及解决方案
