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中使用v-model实现父子组件数据同步的三种方案,如果只有一个匿名v-model的传递的话,可以使用vue3.3新添加的编译宏,defineModel来使用,每种方案结合示例代码给大家介绍的非常详细,需要的朋友可以参考下2023-10-10
vue element-ui的el-input-number默认值设置为空方法
这篇文章主要给大家介绍了关于vue element-ui的el-input-number默认值设置为空的相关资料,el-input-number组件是Element UI非常常用的一个数字输入框组件,它提供了默认值设置的选项,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue this.$toast()用法 ，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
本文主要介绍了在Vue中使用的一些常见混淆用法,包括new Vue()、export default {}、createApp()等,以及如何使用混淆器对代码进行加固,需要的可以参考下2023-12-12
这篇文章主要介绍了vite+ts快速搭建vue3项目以及介绍相关特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
本篇文章主要介绍了简单理解Vue中的nextTick方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
今天小编就为大家分享一篇对vux点击事件的优化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
在vue2的响应式中,存在着添加属性、删除属性、以及通过下标修改数组,但页面不会自动更新的问题,而这些问题在vue3中都得以解决,本文就给大家详细的介绍一下Vue响应式数据原理,感兴趣的小伙伴跟着小编一起来看看吧2023-08-08
在前端开发的时候经常会遇到这样的困惑,设计师给你的设计稿的尺寸和页面的尺寸不一致,导致了页面无法正常显示,下面这篇文章主要给大家介绍了关于一招解决vue页面自适应布局的相关资料,需要的朋友可以参考下2022-07-07
Vue3.x的版本中build后dist文件中出现legacy的js文件问题
这篇文章主要介绍了Vue3.x的版本中build后dist文件中出现legacy的js文件问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论