解决nuxt3子路由router-view中出现的document not defined错误

news2024/11/18 18:37:08

之前讲过几种解决document not defined错误的方法,但是今天碰到一种新情况:

就是访问根路由/ , 然后再跳转到子路由没有问题:

但是如果直接访问子路由时router-view会报这个错误。

 我怀疑原因是: 直接访问子路由时,有可能dom树还没有挂载好,所以找不到document对象。

网上讲了个什么onMounted等待方法,试了一下不管用,然后自己试验找到了办法:

解决办法: 在出现这个错误的组件里面的script标签内部: 将所有涉及到业务逻辑的js代码通过if(process.client) {} 包裹起来

就像下面这样: 

我这里使用的是script标签,所以是把setup函数里面的代码,全部用if(process.client) {} 包裹起来, 然后问题就解决了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1313812.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Tableau快速入门-下载安装加载数据与仪表盘构建

官网介绍 官网连接如下: https://www.tableau.com/zh-cn tableau的产品包括如下: 参考:https://zhuanlan.zhihu.com/p/341882097 Tableau是功能强大、灵活且安全些很高的端到端的数据分析平台,它提供了从数据准备、连接、分析、协作到查阅…

【Matlab】三角函数的周期性图像可视化(附完整MATLAB代码)

三角函数的周期性图像可视化 前言三角函数:MATLAB对三角函数的理解和帮助: 正文思考步骤 代码实现结果 前言 三角函数: 三角函数是数学中一类描述角度和周期性变化的特殊函数。常见的三角函数包括正弦函数 ( sin ⁡ ) (\sin ) (sin) ,余弦函数 ( cos ⁡ ) (\cos…

力扣22. 括号生成(java 回溯法)

Problem: 22. 括号生成 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 我们首先要知道,若想生成正确的括号我们需要让右括号去适配左括号,在此基础上我们利用回溯去解决此题目 1.题目给定n个括号,即当回溯决策路径长度等于 2 n 2n…

【自动化测试】web3py 连接 goerli

web3py 连接 goerli 直接使用库里方法 if __name__ __main__:from web3.auto.infura.goerli import w3w3.eth.get_balance(get_address_by_private_key(os.getenv("AAA_KEY")))error info: websockets.exceptions.InvalidStatusCode: server rejected WebSocket …

计算机网络:物理层(三种数据交换方式)

今天又学到一个知识,加油! 目录 前言 一、电路交换 二、报文交换 三、分组交换 1、数据报方式 2、虚电路方式 3、比较 总结 前言 为什么要进行数据交换? 一、电路交换 电路交换原理:在数据传输期间,源结点与…

在Sqlite中通过Replace来实现插入和更新

你可能在批量处理一个事务的时候,想要批量插入一系列的数据,但是这些数据当添加完一次之后,重新添加的时候,你不想要重新添加,只是想将原有的数据进行更新,例如:我想要通过Excel将一系列的图书导…

群晖上搭建短链接服务Yourls

什么 Yourls ? YOURLS是一组 PHP 脚本,允许您在服务器上运行您自己的 URL 缩短器。您将完全控制您的数据、详细统计数据、分析、插件等。它是免费且开源的。 安装 建数据库 老苏用了群晖自带的 MariaDB 10 数据库 在 phpMyAdmin 中创建名为 yourls 的空数据库 为…

Vue 子传父 组件传参 defineEmits

defineEmits 属性:用于创建自定义事件,接收子组件传递过来的数据。 注意:如果自定义事件的名称,和原生事件的名称一样,那么只会触发自定义事件。 defineEmits 仅适用于 setup 语法糖,其它写法请见&#x…

Qt容器QMdiArea 小部件提供一个显示 MDI 窗口的区域

## QMdiArea ## 控件简介 QMdiArea 继承 QAbstractScrollArea。QMdiArea 小部件提供一个显示 MDI 窗口的区域。QMdiArea的功能本质上类似于MDI窗口的窗口管理器。大多数复杂的程序,都使用MDI框架,在 Qt designer 中可以直接将控件 MDI Area 拖入使用。 ## 用法示例 例 qm…

注意std::shared_ptr的循环引用

指针智能是RAII的思想的具体体现。利用对象生命周期来管理资源。 在C11中,引入shared_ptr、weak_ptr和unique_ptr。 share_ptr是一个能有效解决赋值和拷贝构造的引用技术。 std::shared_ptr通过引用计数的方式来管理对象的生命周期,但是如果两个对象互…

『番外篇三』Swift “乱弹”之带索引遍历异步序列(AsyncSequence)

概览 在 Swift 开发中,我们往往在遍历集合元素的同时希望获得元素对应的索引。在本课中,我们将向小伙伴们展示除 enumerated() 方法之外的几种实现思路。在玩转普通集合之后,我们将用“魔法棒”进一步搞定异步序列带索引遍历的实现。 在本篇博主中,您将学到以下内容: 概…

同时获取el-select的label和value

ui如下: 需求如下: 在点击确认的时候,将id和name都传给一个接口,但是ui只用展示name,name用v-model绑定给input框,但是id不知道怎么传给后端。 解决方法如下: vue中elementUi的el-select同时…

jmeter,csv文件参数化+断言 实现一个接口的case

1、case 及其 测试数据 注意保存文件的编码格式 id,name,limit,status,address,start_time,assert_status,assert_message 100,小米100,1000,1,某某会展中心101,2023-8-20 14:20,200,add event success ,,,,,,10021,parameter error 100,小米102,1002,1,某某会展中心103,2023-…

postman接口测试之Postman配置环境变量和全局变量

前言  我们在测试的过程中,遇到最多的问题也可以是环境的问题了吧,今天开发用了这个测试环境,明天又换了另一个测试环境,这样对于我们测试非常的麻烦,特别最接口的时候需要来回的输入环境地址比较麻烦,今天…

LVS负载均衡集群——NAT地址转换模式与DR直接路由模式

1. LVS集群基本介绍 Cluster,集群、群集。 由多台主机构成,但对外只表现为一个整体,只提供一个访问入口(域名或IP地址),相当于一台大型计算机。 2. 集群的类型 2.1 负载均衡群集(Load Balanc…

安路IP核应用举例(OSC、UART)

1.OSC(内部振荡器) 按照Project->New Project顺序新建工程后,后按照Tools->IP Generator顺序,创建IP核,如下图: 安路FPGA的内置OSC振荡模块频率可选30MHz、60MHz。 可选Verilog或VHDL语言。 如图,生成的.v文件只…

外包干了4个月,测试技术退步明显

先说一下自己的情况,本科生,20年通过校招进入杭州某软件公司,干了3年的功能测试,当然有半年是被封在了家里,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我…

灾备建设中,虚拟机异构平台恢复技术原理与应用

在如今混合云环境下,实现异构虚拟化恢复与迁移面临着极大挑战。不同于市面上有代理的恢复方案,虚拟机无代理跨平台恢复解决方案利用自主研发的转换引擎(VMCE)对已备份虚拟机文件进行高效的存储格式转换和配置信息转换,…

Deep Graph Contrastive Representation Learning

摘要 如今,图表示学习已成为分析图结构数据的基础。受最近成功的对比方法的启发,在本文中,我们提出了一种新的无监督图表示学习框架,该框架利用节点级别的对比目标。具体来说,我们通过破坏生成两个图视图,…

Jmeter接口自动化测试操作流程(超详细整理)

在企业使用jmeter开展实际的接口自动化测试工具,建议按如下操作流程, 可以使整个接口测试过程更规范,更有效。 接口自动化的流程: 1、获取到接口文档:swagger、word、excel ... 2、熟悉接口文档然后设计测试用例&am…