vue路由篇之router-view内容无法渲染出来问题
更新时间：2022年04月28日 09:49:43 作者：Katle
这篇文章主要介绍了vue路由篇之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 之差。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3中如何使用ts，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
本篇文章给大家分享了关于Vue多系统切换实现的解决方案，对此有需要的朋友可以跟着参考学习下。2018-06-06
这篇文章主要为大家介绍了vue实现无缝滚动手摸手教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
vue 监听input输入事件(oninput)的示例代码支持模糊查询
这篇文章主要介绍了vue 监听input输入事件(oninput)支持模糊查询,比如说表格模糊查询，实现一边输入，一边过滤数据，本文通过示例代码给大家详细讲解，需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了springboot+VUE实现登录注册，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了vue项目无法删除的问题及解决方案，具有很好的参考价值，希望对的大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文主要介绍了vue3清空reactive的四种方式,包含使用 Object.assign,使用 Object.keys 和 for...in 循环,使用 delete 操作符和重新赋值4种,感兴趣的可以了解一下2024-03-03
本篇文章主要介绍了vuejs响应用户事件（如点击），通过vuejs响应用户事件的技巧，具有一定的参考价值，有兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要给大家介绍了基于vue+electron实现文件下载打开wps预览,文中有详细的代码示例供大家借鉴参考,感兴趣的同学可以参考阅读下2023-08-08
Vue中使用vue2-perfect-scrollbar制作滚动条
这篇文章主要介绍了Vue中使用vue2-perfect-scrollbar滚动条,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
最新评论