vue路由三级跳转打不开问题

于 2024-10-18 10:51:12 发布
阅读量250 收藏
点赞数 2
文章标签： vue.js javascript 前端 elementui 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69738059/article/details/143036890
版权

这介绍是一下为什么创建这个index.vue文件 

     大家可以理解为index里面的<router-view />标签就是一个舞台，当你点击导航栏的某一个文件就会通过这个index去找里面的文件，找到后放到这个index舞台上

Vue项目中常见问题(15)三级联动组件的路由跳转与传参
qq_46368050的博客
05-15 1774
目录 gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master 方法一:声明式导航router-link来替换a标签跳转(不推荐) 1. 点击后确实能够跳转到/search页面 2. 但是当你鼠标进入三级联动,上下滑动的时候,会出现卡顿现象! 方法二：编程式导航(一般方法) 1.绑定点击事件 2.给点击事件一个方法 3.点击后确实能够跳转到/search页面,而且也没有了卡顿的现象 4...
vue3 Elementplus 动态路由菜单不跳转问题
qq_51355375的博客
06-23 900
vue3 Elementplus 使用component: () => import(`@/views/${item.componentPath}.vue`)加载动态路由菜单不跳转, 报错 Unknown variable dynamic import: ../views/system/user/index.vue at dynamic-import-
vue怎么嵌套多级路由页面打不开_Vue-router 如何在嵌套路由的同时做多级菜单？...
weixin_29526539的博客
01-12 475
最近也碰到了这个问题,研究了一下,发现解决方法是这样子的:假设有个路由如下:{path: '/example',component: Example,children: [{ path: 'index',component: Index,children:[{path: 'submenu1',name: 'Form',component: Index,},{path: 'submenu2',nam...
vue3+ts 用element-plus导航组件点击不跳转的原因
qq_44997940的博客
09-27 1550
vue3
vue3 主页面 跳转到子页面后 ，再次切换到主页面后 主页面及其它的所有页面 竟然不显示了的解决。
花花鱼的专栏
07-31 382
vue下 template只可以包含一个根，否则会导致页面不显示的情况。
vue动态路由,三级及以上路由,地址跳转,但是页面不显示
yuzheh521的博客
12-28 2632
vue动态路由的时候,一级,二级路由都正常展示,但是三级,四级,五级等就只看到地址跳转了,但是页面并没有跳转,这种循环希望大家使用递归。
vue3 新增一个菜单A ，进入A页面后 再切换到 菜单B页面时 页面是空白 需要刷新浏览器才起效
lryh_的博客
06-26 413
由于动态路由加载的状态未被 Vue Router 及时更新导致的。或主布局文件中，添加。属性来强制组件重新渲染。
Vue3 - 解决项目启动后浏览器无法访问问题（Network: use --host to expose）
最是人间留不住，朱颜辞镜花辞树。
03-10 8248
（4）使用浏览器访问“http://localhost:5173”无法打开页面，提示“无法访问此网站localhost 拒绝了我们的连接请求。根据“Network: use --host to expose”提示，要求服务使用 host 来进行暴露，即要将服务暴露成“IP + 端口号”进行访问。（1）首先修改 package.json 文件，将启动项中的 dev 和 serve 增加 --host 参数。（3）上述命令执行后，控制台显示“Network: use --host to expose”
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
以下是如何使用这种方式实现三级菜单页面显示的详细步骤和知识点： 首先，动态加载路由的基本思想是将路由配置延迟到应用运行时，而不是在初始化时静态定义。这允许根据用户权限或其他条件动态地决定哪些路由可以被...
vue-路由精讲 二级路由和三级路由的作用
12-28
1、我们继续上一个案例 vue — 路由精讲制作导航 — 从无到有 ，在 about文件夹下 创建一些文件夹。如下： 2、编写about.vue代码。当我们点击导航中 “关于我们” ，就会显示该部分内容。代码中写了四个可供点击后...
react实现同页面三级跳转路由布局
10-16
在 React 中实现同页面的三级跳转路由布局是前端路由应用中一个常见的需求。三级跳转意味着用户可以通过点击页面上的链接在不同的内容之间切换，而无需重新加载整个页面。这种体验在Web应用中非常受用户欢迎，因为它...
详解vue路由篇(动态路由、路由嵌套)
12-08
在 Vue 中，`vue-router` 是官方提供的路由管理器，它使得单页面应用（SPA）能够根据 URL 地址切换不同的视图。路由的主要职责是根据 URL 映射到相应的组件，从而实现页面间的导航。 一、基础路由 创建 Vue 项目时...
nginx部署Vue项目只能访问首页，访问其他路径404
qq_38157433的博客
02-05 1193
上述配置中，try_files指令会尝试查找请求的文件，如果文件不存在，就会将请求重定向到/index.html。直接访问其他目录时“https://test/example”，报404。访问网站首页没问题，即网站根目录“http://test.com”，在Nginx配置中添加一个用于处理前端路由的规则。nginx部署Vue，
Vue三级路由问题记录
m0_47594094的博客
06-03 596
在自己做项目的时候，发现vue三级路由失效问题，使用了三级路由，结果二级路由跳转不了，并且三级路由的切换之间也切换不了。
【Ruoyi】若依默认打开第一个子菜单，三级菜单时默认跳转到第一个子菜单
ew45218的博客
12-27 1568
官方给出的答案是处理2级菜单的，当菜单为三级时就会出现问题，打开404。在ruoyi-vue中，默认打开第一个子菜单问题处理。
Vue3项目路由无法跳转和渲染页面
redhat0921的博客
07-02 2195
启动项目后，路由无法跳转渲染，原因为使用cnpm安装vue-router根本就没安装成功，使用 yarn add vue-router@4 -S重新安装后，正常跳转渲染。
vue-element-admin 三级路由无法跳转
Mr-k的博客
12-20 7660
vue-element-admin自带的有嵌套路由，不过他的嵌套路由有一个套路，那就是二级路由页面下有个<router-view />标签 //二级路由 <el-alert :closable="false" title="menu 1"> <router-view /> </el-alert> 这里说一下，这里的三级路由指向了一个页面...
vue-router 定义三级路由，路由跳转了，页面没出来
Passerby_K的博客
03-16 8350
可能是因为页面二级路由的和三级的路由共用router-view 了，利用router-view 和 redirect 重新定义一下（每个人的情况不一样，可以参考解决） component: {render(c) { return c('router-view') }}, redirect:'/goods/goodsManage', ...
初入Vue3小白遇到Vue Router路由失效不起眼的小问题
qq_67733013的博客
09-20 1152
同时使用<router-view/>标签需要在创建路由实例的时候指定 / 根标签。这样路由就重新生效了。最后就可以直接使用了，第一种使用方式，通过RouterLink 标签的形式做页面的跳转。对于一个初入Vue3的小白，根据官方文档整合Vue Router时遇到的一些小问题。首先下载vue router（vue3使用vue-router@4版本）第二种通过useRouter来跳转页面。
vue3三级路由跳转刷新后显示不了图片
最新发布
11-25
在 Vue 3 中，如果使用三级路由（即嵌套路由）并尝试在刷新页面后显示动态加载的图片，可能会遇到显示不出来的问题。这是因为浏览器在首次加载时并不会发起图片的懒加载请求，只有当图片所在组件实际显示时才会触发请求。刷新页面会清除所有本地缓存，包括预加载的数据。 解决这个问题可以采取以下步骤： 1. **预加载图片**：在组件的 `mounted()` 或 `created()` 生命周期钩子里，使用 `axios` 或者 `vue-image-loader` 这样的库来提前加载图片，确保图片在第一次访问时已经存在。 ```javascript export default { mounted() { axios.get('/path/to/image') .then(response => this.$options.el.querySelector('img').src = response.data); } } ``` 2. **使用懒加载插件**：如`vue-lazyload`，它可以在图片需要显示时才发起请求，避免首次刷新时的空白。 3. **检查网络请求**：确保图片的URL在浏览器控制台里能正常访问，并且服务端能够响应。 4. **使用哈希策略**：对于非SPA应用，考虑使用 HTML5 的 History API 和 hashbang（#!）来代替路由，这样可以保留页面状态，图片也能随着路由变化而加载。 记得测试在不同环境下的效果，因为某些情况下如HTTPS到HTTP的跳转可能会导致跨域问题影响图片加载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值