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

已于 2023-11-15 20:41:03 修改
阅读量443 收藏
点赞数
文章标签： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue-router跳转页面的方法
08-31
本篇文章主要介绍了vue-router跳转页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
路由跳转，router-view不显示组件页面的几个可能出现的问题及解决方案
weixin_60196946的博客
05-10 2305
路由跳转，router-view不显示组件页面的几个可能出现的问题及解决方案
router路由跳转但页面内容不显示
最新发布
weixin_41618672的博客
02-02 226
新手入门vue3踩坑记录
vue-router重写push方法,解决相同路径跳转报错问题
10-14
主要介绍了vue-router重写push方法,解决相同路径跳转报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router跳转时打开新页面的两种方法
12-08
最近还是在痛苦的挣扎中 挣扎吧 记录一下在vue项目中如何实现跳转到一个新页面（一个比较简单又比较基础的问题了），有两个方法： 1、标签实现新窗口打开 官方文档中说 v-link 指令被 组件指令替代，且 不支持 target=”_blank” 属性，如果需要打开一个新窗口必须要用标签，但事实上vue2版本的 是支持 target=”_blank” 属性的(tag=”a”)，如下： <router-link target="_blank" :to="{path:'/home',
Vue.js实战之利用vue-router实现跳转页面
10-20
对于单页应用，官方提供了vue-router进行路由跳转的处理，这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
解决vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）
weixin_43185419的博客
06-13 9213
正常使用时切换路由都可以正常地切换页面，但是页面长时间无操作就会浮现该问题。使用导航切换路由，路由可以正常跳转，地址栏有变化，但页面不显示。在router-view 中给路由添加key标识。2、切换的各级页面均有根标签节点包裹。
vue3中使用路由功能，地址跳转了，但是页面显示空白
qingyu3044的博客
04-14 4273
按照官方文档，以及网上经典教程都测试了几次，就是不成功。而且还报错网上查了很久，有说是路由地址冲突的原因，又说是mount调用顺序的原因，结果都不是，经过尝试是modules不匹配的原因。
vue2 vue-router 不显示页面问题
LlanyW的专栏
10-30 1万+
最后发现是vue-router版本的问题,最新的版本是4.x.x ， 使用cnpm install vue-router -S， 时默认安装了最新。我的项目的问题是，版本不兼容，环境配置不对。在项目配置的时候，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板。vue 在初始化项目配置的时候，有两个运行环境配置的版本：Compiler 版本、Runtime 版本。首先去看了是否是vue-router引用的问题,排除掉引用问题之后,网上冲浪找了不少方法,
vue3项目路由跳转成功，但是页面空白，刷新一下才能显示
飞舞花下
11-03 1527
在项目搜<router-view，然后加上:key="$route.fullPath"，防止同路由页面不刷新。
Vue3中切换路由页面不展示内容，刷新后页面正常显示
~
07-18 4575
解决办法，给路由添加key。
addRouter页面跳转空白问题
qq_35178316的博客
10-25 3165
vue router 采坑儿记，希望能帮助到你： 1. 问题： 需求：前端路由表，需网站首次加载后，从后端动态获取并刷新（本项目中没有登录） 开始思路（坑儿）： /** * vue router 动态路由实现 使用 router.addRouter() 方法 * 1. 因为本项目不存在登录流程，所以网站初始没有任何路由，也不能在登陆成功后再 addRouter * 2. 解决思路：只能在...
使用vue-router却导致页面空白无法呈现-报错？
世界和我们都不该止步于此
05-12 932
其实是vue-router版本过高的原因（当前使用vue3以下版本） 我们只需要下载一个老版本vue-router就可以了 npm i vue-router@3.2.0 -S
Vue-Router路由首次跳转页面空白,刷新页面又可以正常访问
热门推荐
全干攻城狮
05-18 1万+
背景 最近项目过程中出现了一个奇怪的问题，当用户登入系统后部分路由首次跳转时会出现空白页面，但是在该页面上刷新又可以正常显示路由对应的页面。 系统内包含用户、角色、菜单等管理模块，前端使用了动态路由 问题复现 系统内有两个角色，A1和A2 A1角色包含P1、P2、P3页面的权限 A2角色包含P1、P2、P3、P4、P5页面的权限 当首次使用A1角色对应的用户登入系统时，侧边栏所有菜单都可以正常访问 此时退出A1角色对应的用户并使用A2角色对应的用户登入系统，其中P1、P2、P3菜单对应的页面可以正常访问，
Vue设置了路由跳转后页面还是空白解决办法
qq_67801847的博客
08-26 3547
1.已经设置路由跳转了也是空白是因为没在app.vue里加入。app.vue中即可。
【vue-router】关于在vue3项目中使用vue-router碰到的坑(路由跳转但是页面不更新)
RanDoll_的博客
05-22 7002
首先来说第一个问题，解决思路很简单，就是在路由跳转的时候重新加载组件嘛，只需要给router-view添加一个和路由变化时相关的key就可以了，这样在渲染虚拟dom的时候算法就会判断两次的组件是有区别的，虽然看起来很简单，但是作者一开始没想到这个地方，使用了状态管理器，自定义事件等等方法，现在想来这些方法有些还是能成功奏效的，但是由于第二个问题的存在，这些问题都失败了。
解决vue项目路由跳转页面不变问题
jiangjunyuan168的博客
05-11 2584
问题： 今天在开发vue移动端项目的过程中发现了一个bug，就是当按返回键的时候页面并没有发生变化，一开始还以为是没有监听到返回事件，但是通过测试之后发现返回事件监听成功了，路由也发生了变化，相应事件也触发了，就是页面视图没有跟着改变。 解决方法： 项目中路由设置的是 hash模式，所以对 hashchange 事件进行监听（hash模式下，路由的变化会触发hashchange事件） 在App.vue中给hashchange绑定事件： mounted() { // 检测浏览器路由改变页面不刷新问题
vue3项目路由跳转成功，但是页面空白，刷新一下才能显示（已解决）
JHGYLD7的博客
07-30 2337
原链接：(23条消息) vue 路由跳转页面不刷新_vue路由跳转页面不刷新_咬着拽天下的程序猿的博客-CSDN博客困扰我整整一天的问题就这么解决了，谢谢
vue-router 路由跳转后原页面内容还在怎么处理
07-23
在 Vue 中使用 vue-router 进行路由跳转后，如果希望原页面的内容保留，可以通过使用 `<router-view>` 组件的 `keep-alive` 特性来实现。 首先，在你的路由配置文件（通常是 `router.js`）中，为需要保留内容的路由添加 `meta` 字段，如下所示： ```javascript const routes = [ { path: '/home', name: 'Home', component: Home, meta: { keepAlive: true // 添加该字段表示需要缓存内容 } }, // 其他路由配置... ] const router = new VueRouter({ routes }) export default router ``` 接下来，在你的根组件（通常是 `App.vue`）中，使用 `<router-view>` 组件，并添加 `keep-alive` 特性： ```html <template> <div id="app"> <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component"></component> </keep-alive> </router-view> </div> </template> ``` 这样，在跳转到带有 `keep-alive` meta 字段的路由时，页面的内容将会被缓存起来，再次返回时内容将保留。 注意：使用 `keep-alive` 特性会导致组件的生命周期钩子函数不再触发，如果需要在进入或离开页面时执行特定逻辑，可以使用 `activated` 和 `deactivated` 钩子函数。 希望能帮到你！如有更多问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

B_il_l

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

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

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

打赏作者

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

抵扣说明：

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

余额充值