Vue项目加载不出页面,router-view渲染不出页面

最新推荐文章于 2024-07-13 09:29:16 发布
最新推荐文章于 2024-07-13 09:29:16 发布
阅读量1.5w 收藏 4
点赞数 3
分类专栏： Vue 文章标签： vue-router router-view渲染不出页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40688217/article/details/91049907
版权
在回顾vue-router时遇到一个问题，发现router-view无法正常渲染页面。错误原因在于路由配置中，组件名被误写为comment，而非component。此外，确保路由配置的正确性，避免将routes写错。纠正这些错误后，问题得到解决。
摘要由CSDN通过智能技术生成

最近在回顾vue-router的时候踩到一个坑，router-view不能渲染

在这里插入图片描述
下面是router的代码

在这里插入图片描述
仔细看会发现……第4行和第14行……应该写成component而我写成了comment，
就是一个单词的原因 导致加载不出来……

逛论坛发现，还有很重要的一点，那就是该写成routes的地方一定一定不要写成其他（这里不举例了，自行想象，避免误导）

改正后

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

iKendall
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Bug 记录：router-view 没有被渲染
qq_46331926的博客
03-14 770
起因： 在浏览器控制台查看 router-link 的时候，发现其被正常渲染，然而 router-view 却没有被浏览器渲染出来。 排查： 因 vue 的静态路由文件控制着上述的两个标签，查看代码（../router/index.js）如下： import Vue from 'vue' import VueRouter from 'vue-router' import pageOne from...
cdn方式的vue路由使用
qq_41756580的博客
06-14 4399
首先引入cdn: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> 引入cdn后便可以...
vue3+vite+移动端webview打包后页面加载空白问题解决办法
最新发布
云加速
07-13 283
在使用Vue3、Vite以及移动端Webview进行开发时，打包后页面加载出现空白的问题可能是由于多种原因造成的。通过上述方法，你可以尝试解决Vue3、Vite以及移动端Webview打包后页面加载空白的问题。确保Webview的配置正确，没有阻止JavaScript的执行或资源的加载。属性，以正确设置基础路径，使得构建后的资源能够从正确的相对路径加载。如果资源是从不同的域加载的，确保服务器配置了正确的CORS策略。确保打包后的资源文件没有损坏，并且所有依赖都已正确加载。在所有环境中都是可用的。
初识vue（9）——如何解决 vue-router 的 router-view 渲染不出来 问题
小R.的博客
02-18 526
  不知为何，我的 vue-router 的 router-view 渲染不出来内容，找了半天最后发现是单词写错了。⊙▃⊙   注意下图所示的两个单词别写错了，我就是一不小心把 component 写成了 Component ，害得我找了半天。 ...
vue-router 路由嵌套显示不出来_vuerouter 知识点查漏补缺
weixin_39898150的博客
11-20 511
一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接呢？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题。二、vue-router是什么这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA(单页应用)的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。 v...
【大坑】router-view 无渲染，无报错
weixin_64210950的博客
10-18 1872
router-view 无渲染，无报错解决方案
router-view 不渲染
qq_27681677的博客
03-29 949
一般做vue项目使用vue-router的时候，会突然发现router-view不渲染，并且没有报错的问题出现，会搞的一头雾水，寻找逻辑，文件命名及引入也没有什么毛病，大概率上就是很小的细节上我们给忽略掉了，以致找不到问题所在，一般情况下，很容易忽视的一个错误是routes写成了routers,另外一个呢，就是component写成了componets.（如上图红框所示的位置。
vue-router 中router-view不能渲染的解决方法
12-08
在使用vue-router的时候跳了一个很大的坑，router-view不能渲染，花费了好多时间终于发现了原因。 项目目录结构 其中main.js import Vue from 'vue'; import App from './App'; import router from './router'; /*...
vue实现同一个页面可以有多个router-view的方法
10-17
在Vue中，实现同一个页面多个router-view的方法主要涉及到Vue Router的嵌套路由配置。Vue Router是Vue.js官方的路由管理器，它和Vue.js的深度集成，使得构建单页面应用变得非常容易。通过嵌套路由，可以将一个页面...
vue2.0 路由不显示router-view的解决方法
08-27
const router = new VueRouter({ routes }); ``` 3. 检查组件是否正确注册：确保组件正确注册，能够被Router-View正确渲染。 ```javascript import goods from './components/goods/goods'; ``` 4. 检查eslint配置：...
vue中的router-view组件的使用教程
10-17
总结起来，Vue Router 的`<router-view>`组件是实现单页应用路由切换的关键，它允许我们在同一页面中动态地加载和展示不同组件。通过合理配置路由规则，我们可以构建出层次分明、交互丰富的应用界面。结合`<router-...
vue子组件在router-view中渲染不出来的问题
奔跑的小猪仔
05-18 4091
解决办法：分别把两个组件的name去掉 因为这个地方好像设计的有bug
vue中的router-view内容无法渲染出来
qq_40722582的博客
02-17 1339
我的main.js中路由的写法是这样的。 const routes = [ {path: '/', component: Home} ] 然后实例化 const router = new VueRouter( routes ) 然后再注入 new Vue({ render: h => h(App), router }).$mount('#app') 但是我访问 / 的时候压根得不到home组件内容。。。。 后来发现是下面的那里漏了花括号...
问题：vue-router 中router-view不能渲染【已解决】
weixin_37702998的博客
12-08 3063
router-view不能渲染 通过网上查阅资料发现：
Vue路由篇之router-view内容无法渲染出来的问题，神坑!!
qq_41096610的博客
03-31 4054
最近在学习vue路由知识，在写到关于 <router-view></router-view>时，内容无法渲染出来，找了许久之后，才发现是一个神坑！！！ 配置路由时注意，名字定义为routes 而不是routers 否则你的也内容渲染不出来。 ...
router-link 地址可以改变，但是router-view不渲染
qq_36742720的博客
10-11 3753
这个问题困扰了我整整一天，没错，就是一天！苦思冥想，还以为是哪里缺少了包的导入，但是不管怎么调试，router-view就是显示不出来，更可怕的是，浏览器上居然不报错！！！ 后面终于还是妥协在csdn上找出了错误： export default new Router( { routes: [ { path：'\', component:...
关于Vue-router中无法渲染子路由内容的问题
baidu_39110402的博客
04-10 1394
关于Vue-router中无法渲染子路由内容的问题 问题发现： 先贴上源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>路由嵌套</title> <script src="../vue.js"&gt...
使用vue3的router-view但页面不渲染的解决方法
m0_60458910的博客
02-29 943
一个解决vue中router-view页面不渲染的方法，关键在与Vetur。
vue app.vue <router-view></router-view> 默认挂载界面
03-30
<router-view></router-view> 是 Vue Router 的核心组件，它用于渲染当前路由匹配到的组件。 在一个 Vue 应用中，如果使用了 Vue Router，那么在 App.vue 组件中使用 <router-view></router-view> 就是用来显示当前...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值