Vue3配置了路由但是页面不显示问题

已于 2023-06-23 00:02:22 修改
阅读量2.8k 收藏
点赞数 3
文章标签： 前端 vue.js javascript
于 2023-06-22 22:47:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shanins/article/details/131345141
版权
作者在尝试使用最新技术栈Vue3、Vite和TypeScript构建博客时遇到挑战，如TS版本兼容性问题和Router配置错误。一个未在App.vue中添加<RouterView/>导致页面无法显示的问题浪费了作者大量时间，这个问题的解决标志着前端配置学习的一个小进步。
摘要由CSDN通过智能技术生成

最近尝试开始自己写博客了，打算用最新的技术一边学一边做，就尝试使用Vue3+Vite+TS做前端。结果遇到了一系列问题比如TS5.0的兼容问题各种各样报红，在一个非常蠢的地方止步了，就是配置了Router但是不显示页面，结果发现是自己没有在App.vue配置<RouterView/>，浪费了非常多时间。

IchicHii
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vue-router 中router-view不能渲染的解决方法
12-08
最近在做一个vue的项目，其中使用了vue2.0,vue-router2.0。在使用vue-router的时候跳了一个很大的坑，router-view不能渲染，花费了好多时间终于发现了原因。 项目目录结构 其中main.js import Vue from 'vue'; import App from './App'; import router from './router'; /* eslint-disable no-new */ new Vue({ el: '#app', router, render: h => h(App) }); app.vue
vue3路由配置了，但是页面依旧空白
weixin_43287787的博客
04-24 1408
之前因为控制台报错，修改了main.js中的路由引入路径为。package.json的安装版本是4.1.6。
vue问题：已经配置router，但是无法访问页面
最新发布
唯有热爱 可抵万难
07-22 186
配置后，页面无法正常访问，访问后为空白，但是如果在APP.vue里面添加内容时是可以正常显示的。
vue3+vite创建路由页面空白问题
weixin_56733569的博客
02-01 1692
关于如何解决路由页面空白，后台报错的问题
vue3创建路由之后页面不显示问题
qq_40640838的博客
11-17 287
只说自己遇到的情况：createApp(App)多次使用导致前面的路由和ui被顶替掉了。
vue3 嵌套路由，页面不显示的问题
yn21296的博客
06-29 2005
实际上三级页面已经显示，但是被覆盖，所以需要再添加一个空页面用来展示三级页面。SubView.vue页面，也就是多加一个router-view。使用vue3嵌套路由时，三级路由url正确，页面不显示的问题。路径为 /home/task 但仍显示 Home页面。
vue3中使用路由功能，地址跳转了，但是页面显示空白
qingyu3044的博客
04-14 4547
按照官方文档，以及网上经典教程都测试了几次，就是不成功。而且还报错网上查了很久，有说是路由地址冲突的原因，又说是mount调用顺序的原因，结果都不是，经过尝试是modules不匹配的原因。
Vue三层嵌套路由页面不显示问题，vue-element-admin三层路由显示空白
coderYYY的博客
11-18 3035
渲染不出来是因为第二层那里缺少一个容器，用一个组件专门用来渲染即可。
解决vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）
热门推荐
weixin_43185419的博客
06-13 1万+
正常使用时切换路由都可以正常地切换页面，但是页面长时间无操作就会浮现该问题。使用导航切换路由，路由可以正常跳转，地址栏有变化，但页面不显示。在router-view 中给路由添加key标识。2、切换的各级页面均有根标签节点包裹。
解决＜RouterView＞在App.vue中不显示的问题
m0_63003627的博客
07-16 1724
3.检查main.js中是否正确引入router（我就是因为这个弄了半天T T)1.首先检查最容易拼错的routes。2.检查引入路径是否正确。
Vue路由切换页面不更新问题解决方案
10-15
在使用Vue.js进行单页面应用开发时，经常遇到页面刷新不更新的问题。这个问题通常出现在使用vue-router进行页面路由切换时，尤其是当路由切换所涉及的组件相同时。这种情况下，Vue不会重新创建组件实例，而是复用已...
vue router路由嵌套不显示问题的解决方法
08-30
通过以上步骤，大多数情况下都可以解决Vue Router的子路由不显示问题。如果问题仍然存在，建议查看浏览器的开发者工具中的网络请求和Vue Router的调试信息，以获取更详细的错误提示。此外，查阅Vue Router的官方文档...
vue 解决路由只变化参数页面组件不更新问题
10-16
`后面的部分），而路径本身保持不变，Vue Router默认不会触发组件的重新渲染，这可能导致页面组件不更新的问题。本文将深入探讨这个问题，并提供解决方案。 首先，我们需要了解Vue Router的工作原理。当路由路径...
vue router 配置路由的方法
10-18
3. **配置路由规则**：通过 `VueRouter` 构造函数创建一个路由实例，传入一个 `routes` 数组，数组中每个对象代表一个路由规则，包含 `path` 和 `component` 属性。`path` 是 URL 哈希值，`component` 是对应显示的...
2.（vue3.x+vite）使用vue-router
GIS之家家长
11-24 417
2.（vue3.x+vite）使用vue-router
Vue路由跳转-页面显示空白
孙少的博客
05-07 4865
跳转页面，指定路径跳转到某个页面时，如果没有按照正确的方式写路径，会导致页面显示空白 html部分 方法1、 <div class="nav-item-1" @click="navitem">拼团专区</div> 方法2、 <router-link class="nav-item-2" to="/navitem">秒杀活动</router-link> js部分 methods: { //拼团专区页面 navite
vite vue3 electron项目中使用router-view不能热更新问题
九段刀客的博客
05-11 426
router中组件的component需要这样导入才能热更新。
vue3使用router.push无法跳转/跳转缓慢
weixin_60831172的博客
05-09 1275
把router.push跳转方式改为router.resolve方式跳转。
vue devtools控制台不显示
03-16
您好，如果您的Vue Devtools控制台不显示，您可以尝试以下解决方法： 1. 确认您已经安装了Vue Devtools插件，并且已经启用了它。 2. 确认您的Vue应用程序已经启动，并且正在运行。 3. 确认您的Vue应用程序已经连接到Vue Devtools插件。您可以在Chrome浏览器的开发者工具中查看控制台输出，以确认是否连接成功。 4. 如果您的Vue应用程序是使用Vue CLI创建的，请确保您已经安装了Vue CLI插件，并且已经正确配置了Vue Devtools插件。 如果您仍然无法解决问题，请尝试重新安装Vue Devtools插件，并确保您的浏览器和Vue应用程序都是最新版本。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值