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 之差。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue activated在子组件中的使用，文章围绕vue activated的xingu你资料讲解展开内容并附上具体代码,需要的朋友可以参考一下2021-11-11
本文主要介绍了 Element基于el-input数字范围输入框的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
这篇文章主要介绍了解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目.文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了Vue 内置组件keep-alive的使用示例，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-04-04
本文主要介绍了element tab标签管理路由页面的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
最近在做一个前端vue.js对接的功能模块时，需要实现一个下载图片的功能，本文就介绍了vue.js根据图片url进行图片下载，感兴趣的可以了解一下2021-06-06
这篇文章主要介绍了vue.js数据加载完成前显示原代码{{代码}}问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
本文主要介绍了vue实现数字变换动画的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
前端vue面试总问watch和computed区别及建议总结
在现代前端的面试中,vue和react是面试过程中基本必问的技术栈,其中Vue响应式话题,watch和computed是面试官非常喜欢聊的主题,虽然watch和computed它们都用于监听数据的变化,但它们在实现原理、使用场景和行为上有着显著的区别,本文将深入探讨,并提供一些面试过程中的建议2023-10-10
这篇文章主要为大家详细介绍了Vue数字输入框组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
最新评论