vue同页面多路由懒加载-及可能存在问题的解决方式

2024-06-24 13:08
文章标签 vue 加载 页面 多路 解决 方式 存在 问题 可能 javascript frontend

本文主要是介绍vue同页面多路由懒加载-及可能存在问题的解决方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先上图，再解释
在这里插入图片描述在这里插入图片描述图一是多路由页面，图二是路由文件。从图一可以看出每个router-view对应的name都不一样。从图二可以看出层路由对应的组件加载方式要跟图一中的name相对应，并且图二的路由层在跟图一对应的页面中要加上components层，多一个s结尾，里面的的方法名就是图一路由的name值，里面还可以照样用懒加载的方式。

页面上其他的路由在路由文件中也跟图二是一样的写法。

附送可能存在的问题解决：
在同页面多路由的情况下，如果像我这边有加上导航菜单需要对应的路由，那刷新会导致默认显示第一个菜单去，页面内容原本是在第三个的路由上显示结果刷新页面加载第一个路由导致页面内容不显示问题。我们可以通过在多路由的页面中的mounted周期方法中去判断路由的前半部分是否存在，存在的话则跳转菜单默认项以及显示哪个要加载的路由
在这里插入图片描述

这篇关于vue同页面多路由懒加载-及可能存在问题的解决方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1090236。

相关文章

问题：第一次世界大战的起止时间是 #其他#学习方法#微信

问题：第一次世界大战的起止时间是 #其他#学习方法#微信

问题：第一次世界大战的起止时间是 A.1913 ~1918 年 B.1913 ~1918 年 C.1914 ~1918 年 D.1914 ~1919 年 参考答案如图所示
阅读更多...
随想录 Day 69 并查集 107. 寻找存在的路径

随想录 Day 69 并查集 107. 寻找存在的路径

随想录 Day 69 并查集 107. 寻找存在的路径 理论基础 int n = 1005; // n根据题目中节点数量而定，一般比节点数量大一点就好vector<int> father = vector<int> (n, 0); // C++里的一种数组结构// 并查集初始化void init() {for (int i = 0; i < n; ++i) {father[i] = i;}
阅读更多...
2024.6.24 IDEA中文乱码问题（服务器 控制台 TOMcat）实测已解决

2024.6.24 IDEA中文乱码问题（服务器 控制台 TOMcat）实测已解决

1.问题产生原因： 1.文件编码不一致：如果文件的编码方式与IDEA设置的编码方式不一致，就会产生乱码。确保文件和IDEA使用相同的编码，通常是UTF-8。2.IDEA设置问题：检查IDEA的全局编码设置和项目编码设置是否正确。3.终端或控制台编码问题：如果你在终端或控制台看到乱码，可能是终端的编码设置问题。确保终端使用的是支持你的文件的编码方式。 2.解决方案： 1.File -> S
阅读更多...
idea lanyu方式激活

idea lanyu方式激活

访问http://idea.lanyus.com/这个地址。根据提示将0.0.0.0 account.jetbrains.com添加到hosts文件中，hosts文件在C:\Windows\System32\drivers\etc目录下。点击获得注册码即可。
阅读更多...
JAVA读取MongoDB中的二进制图片并显示在页面上

JAVA读取MongoDB中的二进制图片并显示在页面上

1：Jsp页面： <td><img src="${ctx}/mongoImg/show"></td> 2：xml配置： <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001
阅读更多...
vue, 左右布局宽，可拖动改变

vue, 左右布局宽，可拖动改变

1：建立一个draggableMixin.js  混入的方式使用 2：代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr
阅读更多...
vcpkg安装opencv中的特殊问题记录（无法找到opencv_corexd.dll）

vcpkg安装opencv中的特殊问题记录（无法找到opencv_corexd.dll）

我是按照网上的vcpkg安装opencv方法进行的（比如这篇：从0开始在visual studio上安装opencv（超详细，针对小白）），但是中间出现了一些别人没有遇到的问题，虽然原因没有找到，但是本人给出一些暂时的解决办法： 问题1： 我在安装库命令行使用的是 .\vcpkg.exe install opencv 我的电脑是x64，vcpkg在这条命令后默认下载的也是opencv2:x6
阅读更多...
问题-windows-VPN不正确关闭导致网页打不开

问题-windows-VPN不正确关闭导致网页打不开

为什么会发生这类事情呢？ 主要原因是关机之前vpn没有关掉导致的。 至于为什么没关掉vpn会导致网页打不开，我猜测是因为vpn建立的链接没被更改。 正确关掉vpn的时候，会把ip链接断掉，如果你不正确关掉，ip链接没有断掉，此时你vpn又是没启动的，没有域名解析，所以就打不开网站。 你可以在打不开网页的时候，把vpn打开，你会发现网络又可以登录了。 方法一 注意：方法一虽然方便，但是可能会有
阅读更多...
JavaScript全屏，监听页面是否全屏

JavaScript全屏，监听页面是否全屏

在JavaScript中，直接监听浏览器是否进入全屏模式并不直接支持，因为全屏API主要是关于请求和退出全屏模式的，而没有直接的监听器可以告知页面何时进入或退出全屏模式。但是，你可以通过在你的代码中跟踪全屏状态的改变来模拟这个功能。 以下是一个基本的示例，展示了如何使用全屏API来请求全屏模式，并在请求成功或失败时更新一个状态变量： javascriptlet isInFullscreen =
阅读更多...
加载资源文件失败

加载资源文件失败

背景         自己以前装了一个海康的深度学习算法平台，试用期是一个月，过了一个月之后，因为没有有效注册码或者加密狗的支持了导致无法使用，于是打算卸载掉，在卸载一个软件的时候，无论是使用控制面板还是软件自带的卸载功能，总是卸载不掉，提示“加载资源文件失败”。该软体主要包括以下两部分： 用自带卸载功能卸载的时候分别提示如下：     用控制面板卸载的时候反应很慢，最后也是提示这个
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2