vue-router配置后，跳转路径显示正确但是跳转后没有内容

已于 2023-11-15 20:41:03 修改
阅读量789 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-11-15 18:27:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bill_lalala/article/details/134426279
版权

就比如我点击Go to Home，链接显示的是自己所配置的路径，但是未显示内容

一般情况下是去看你所配置的router的.js文件,我这里是component写成了comment，改过来就能正常显示了

同时component的意思是用于指定一个路由对应的组件，当你在路由匹配时，Vue Router 将会渲染指定的组件到 <router-view> 中。这个属性接受一个组件对象或组件的异步解析函数。

还可以用components,来对应多个组件就比如下图去渲染对应的  <router-view></router-view>组件

B_il_l
关注
Vue路由跳转后组件内容丢失问题解决方案
CodeSpark的博客
10-03 869
Vue Router默认使用懒加载（lazy loading）的方式加载组件，这意味着组件的代码只有在需要被渲染时才会被加载。在Vue应用中，如果遇到路由跳转后组件内容丢失的问题，可以尝试使用路由级别的代码分割来解决。通过动态加载组件的代码，可以确保即使组件加载有延迟，也能够正确地显示组件的内容。当我们在Vue应用中使用Vue Router进行路由跳转时，有时候可能会遇到这样的情况：目标组件的内容没有正确地显示出来。需要注意的是，在使用路由级别的代码分割时，需要使用动态导入的语法，并指定组件的相对路径。
记录vue-router跳转页面空白问题
Nothingnessdosink的博客
12-19 6737
vue- router里踩坑太多，全记录在这里，持续更新。
router路由跳转但页面内容不显示
最新发布
weixin_41618672的博客
02-02 551
新手入门vue3踩坑记录
vue-router路由导航url已改变，但未跳转至对应组件
mmsmsmm的博客
08-25 3897
vue-router路由导航url已改变，但未跳转至对应组件
vue 路由能够跳转，但不显示内容
z_sr1的博客
09-30 528
<router-linkto="/">首页</router-link>| <router-linkto="About">About</router-link> 已经成功跳转 不显示每个页面的内容 需要加上 <router-view></router-view>
vue打包后vue-router无内容
weixin_45042868的博客
11-17 495
在使用了createWebHistory创建路由时，发现打包后页面空白，也无报错信息。
vue配置路由，页面内容不展示
m0_52318340的博客
07-14 4198
代码】vue配置路由，页面内容不展示。
Vue router路径跳转
z772330927的博客
09-21 1160
Vue 路径跳转 方法一 <div @click="openPage(`/index`),{name:'2'},{type:'2'}"></div> //path,跳转的路径；query，query的参数，params，params的参数 openPage(path, query = {},params={}) { let routeUrl = this.$router.resolve({ path, query,params }); window.o
Vue.js实战之利用vue-router实现跳转页面
10-20
然后，在项目的入口文件main.js中引入vue-router，并使用Vue.use()方法进行安装，最后实例化VueRouter并将配置好的路由对象传入Vue实例。 在配置路由时，每个路由由一个对象表示，对象中包含path（路径）、name...
vue router路由跳转了，但页面没有变
lwj1372391870的博客
06-29 4514
vue router路由跳转了，但页面没有变
Vue——vue router路由跳转了，但是页面没有变
qq_43201350的博客
07-12 7139
解决方案：在app.vue页面中加上router-view(很关键）
Vue-Router来实现组件间跳转的三种方法
08-28
"Vue-Router来实现组件间跳转的三种方法" Vue-Router是Vue.js官方提供的一个路由管理器，主要用于实现SPA（Single-Page Application）应用程序中的路由管理。通过使用Vue-Router，可以轻松地实现组件之间的跳转，...
Vue访问路径显示不了自己的页面
qq_45775342的博客
04-01 413
Vue访问路径显示不了自己的页面 可能自己在不经意的时候写错字母了，把routes写成router了，这样就是显示不了自己访问的页面
vue router 路由跳转获取不到参数
qq_45991812的博客
08-31 2508
混淆 query 和 params 的使用方法, 在使用 params 传参时错误的使用了 path。query 传参是使用 path 来引入，会将传递的参数显示在 url 后，像是带参的 get 请求。使用 query 页面刷新时不会清空传入的数据， params 则会清空。params 传参使用 name 引入，会隐藏参数，像是 post。路由传参一直不能获取到参数, 未出现报错。使用name要对应params。使用path要对应query。
深入揭秘前端路由本质，手写 mini-router
前端劝退师
09-22 384
前言前端路由一直是一个很经典的话题，不管是日常的使用还是面试中都会经常遇到。本文通过实现一个简单版的 react-router 来一起揭开路由的神秘面纱。通过本文，你可以学习到：前端路由...
vue各路径，组件都没问题，但页面空白
热门推荐
teletubbies的博客
12-16 2万+
App.vue <template> <div id="app"> <!-- 路由占位符 --> <router-view></router-view> </div> </template> <script> export default { name: 'app' } </script> <style> </style> index.js
Vue设置路由后页面仍不显示为空白
qq_43840793的博客
03-31 1万+
问题现象 设置了路由，新增的页面的页面依然显示空白，没有任何报错。 问题原因与解决办法 出现这个问题只能说明路径或配置写错了。 第一步：检查配置：router/index.js中的routes不要写成routers,就是要少一个r。 第二步：检查页面路径是否写错。我这个是@/page/login，就不能写成@/src/page/login @/router也不要写错 反思 最近出现了很多错误都是字母大小写的问题，对于外部的配置或api一定要注意。同时，要记录一下日常错误，因为以前出错的问题解决了，现在
解决vue-router进行build无法正常显示路由页面的问题
08-27
const router = new VueRouter({ mode: 'hash', base: __dirname, routes: [ { path: '/first', component: firstCom } ] }) ``` 五、注意事项 在使用Vue-Router时，开发者需要注意的是，在进行Build时，需要...
解决vue路由发生了跳转但是界面没有任何反应问题
weixin_74285634的博客
12-13 1万+
在vue中，我们使用路由（Router）来实现页面的跳转。但是有时候我们会遇到这样一种问题：点击页面中的导航链接，路由发生了跳转，但是网页的界面没有任何变化。这是什么原因呢？这通常是因为我们的路由跳转没有更新对应的视图（View）导致的。那么如何解决这个问题呢？下面，我将为大家介绍两种解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

B_il_l

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值