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

已于 2023-12-15 21:45:34 修改
阅读量630 收藏 7
点赞数 4
文章标签： nuxt3 服务端渲染
于 2023-12-15 21:37:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaohuizhuang6019/article/details/135025451
版权

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

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

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

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

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

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

就像下面这样： 

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

kingtopest
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分享：nuxt嵌套路由
awseda的博客
05-10 1566
nuxt嵌套路由 你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。 创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。 Warning: 别忘了在父组件(.vue文件) 内增加 用于显示子视图内容。 假设文件结构如： pages/ --| users/ -----| _id.vue -----| index.vue --| users.vue Nuxt.js 自动生成的路由配置如下： router: { routes: [
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
01-18
看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容，要想默认的在<nuxt>区域显示一个页面内容怎么办？ 自己案例代码： pages/parent.vue 父组件的页面的内容 <!-- 进行切换...
Vue ‘router‘ is not defined
热门推荐
weixin_43847762的博客
07-26 1万+
‘router’ is not defined 原因：在index.js中未定义router 解决办法：router放入main.js
Nuxt3自定义部分模块路由
weixin_47948509的博客
06-14 461
Nuxt3项目中，部分页面的路由需要改成特定的路由名称显示。
vue2 报错Uncaught ReferenceError: Router is not defined怎么解决
weixin_63477921的博客
02-26 2488
的错误，可能是因为你的代码中没有正确引入 Vue Router 或者没有正确使用。：首先，你需要确认你的项目中已经安装了 Vue Router。：在你的 Vue 项目中，确保你正确地引入了 Vue Router，并且在 Vue 实例中使用它。：确保你已经正确定义了路由配置。在你的项目中，通常会有一个单独的文件来定义路由，比如。：最后，确保你在组件中正确使用了路由，比如在模板中使用。是 Vue Router 的核心对象，如果出现。或者在 JavaScript 中使用。在你的项目的入口文件（通常是。
Nuxt 3 路由系统详解：配置与实践指南
最新发布
06-21 721
摘要：本文是一份关于Nuxt 3路由系统的详尽指南。它从介绍Nuxt 3的基本概念开始，包括Nuxt 3与Nuxt 2的区别和选择Nuxt 3的理由。然后，它详细解释了安装和配置Nuxt 3的步骤，以及Nuxt 3路由系统的基础知识，如动态路由和嵌套路由。接着，它介绍了路由中间件的作用和编写自定义中间件的方法，并讨论了页面布局、导航链接和页面过渡效果。最后，它涵盖了高级路由技巧，如异步数据获取、错误页面处理和路由守卫，以及实战案例分析，包括博客系统路由设计、电商网站路由设计和多语言支持的路由实现。最后，它讨
Nuxt.js学习笔记（一）路由与视图
v3424的博客
12-14 1009
Nuxt.js4. 路由4.1 路由概述4.2 基础路由4.3 动态路由4.4 动态命名路由4.5 默认路由4.6 嵌套路由4.7 过渡动效4.7.1 全局过渡动效设置4.7.1 自定义动画5. 视图5.1 默认模板5.2 默认布局【掌握】5.2.1 布局概述5.2.2 布局分析5.2.3 公共导航5.3 自定义布局5.4 错误页面5.5 Nuxt组件特殊配置5.5.1 模板代码5.5.2 head 4. 路由 4.1 路由概述 Nuxt.js 依据 pages 目录结构自动生成 vue-router 模
Nuxt.js nuxt-link与router-link的区别说明
01-22
nuxt-link 先看一下官方api介绍<nuxt> 正如官方所说<nuxt>使用方式和用途<router>是一致的。 但，后面说将来我们会为<nuxt>组件增加更多的功能特性，例如资源预加载，用于提升 nuxt.js 应用的响应速度。 当写这篇...
vue-router之nuxt动态路由设置的两种方法小结
10-17
在Vue.js和Nuxt.js中，我们通常使用`<nuxt-link>`组件来创建可点击的链接，它相当于Vue Router中的`<router-link>`。在处理动态路由时，我们需要将路径与数据对象的属性关联起来。以下是一个示例： ```html ...
router-extras-module:Nuxt 路由器的额外附加组件
07-24
将@nuxtjs/router-extras依赖项添加到您的项目中 yarn add --dev @nuxtjs/router-extras # or npm install --save-dev @nuxtjs/router-extras 添加@nuxtjs/router-extras的buildModules的部分nuxt.config.js :...
nuxt-sass-resources-loader：用于NuxtJ的SASS资源（例如变量，mixins等）模块
02-05
// nuxt-sass-resorces-loader export default { modules : [ 'nuxt-sass-resources-loader' ] , // your settings here sassResources : [ '@/path/to/first-resources.sass' ] } // @nuxtjs /style-re
解决nuxt3中scroll组件渲染报错：document is not defined
jiaohuizhuang6019的博客
12-14 938
解决nuxt3中scroll组件渲染报错：document is not defined
Nuxt3 中如何注册带有document的自定义Vue插件（解决document is not defined问题）
athal的博客
08-23 637
想法是在插件里注册，也就是先渲染并插入document.body中，把暴露的方法作为应用实例的全局属性。这样在其他组件使用时，就不需要引入该组件，只需要调用全局里对应的方法即可使用。其实官方文档有注册方法，但是说明不清晰，没有深入测试成功。之后又照着网上其他的写法（大都是Nuxt2），都不成功，报错document is not defined。不需要在nuxt.config.ts里设置plugins: [{ src: '...', ssr: false}]，很方便。
router路由在nuxt和vue中的区别
幻日のヨハネ
08-24 3140
Vue 在 Vue 里 router 需要自行配置路由表，看一个简单的例子： { path: '/zip', component: Layout, redirect: '/zip/download', name: 'Zip', meta: { title: 'Zip', icon: 'zip' }, children: [ { path: 'download', component: () => impor
Nuxt3中的路由 NuxtLink
04-02 1772
给app.vue中 添加标签（相当于vue2中router-view标签）,再在根目录新建 pages 文件夹，添加 index.vue文件，这样当访问localhost:3000/ 时，就不会去访问app.vue，而是 pages/index.vue 页面了。（经测试，此时就算把app.vue删掉，项目依然是可以运行的）
Nuxt.js--》添加路由、视图和过渡效果
ztK63LrD的博客
08-27 1188
从软件的架构的角度来看，HTML标记和内容(包括元信息、图像和字体)均为应用程序的视图或表示层，在nuxt中我们可方便地创建自定义视图。Nuxt中的视图结构包含应用程序模板、HTML头、布局和页面层，我们可以通过它们创建应用程序路由的视图。在更加复杂的应用程序中，我们可通过API中的数据填充它们；
nuxt学习篇-01-目录和路由
Kratial的博客
01-10 3923
1.nuxt的目录介绍 .nuxt文件夹：(nuxt.js build output)nuxt自动生成的，临时的用于编辑的文件 assets文件夹: 存放未编译的静态资源譬如less,sass或javascript。 components： 放置vue组件,这些组件不会像页面组件那样有asyncData方法的特性 layouts: 组织应用的布局组件。 middleware: 放置应用所需的中间件（中间件允许定义一个自定义函数运行在一个页面或一组页面渲染之前） pages: 用于组织应用的路由及视图。N
13 nuxt3学习（新建页面 内置组件 assets 路由）
yunbabac的博客
03-02 2346
nuxt3新建页面 内置组件 assets 路由
vue-router各种路由笔记
NeroSolomon的博客
07-29 575
#前端路由 前端页面根据不同路由显示不同的内容和页面，通过组件构建的单页面 优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户 缺点：不利于SEO，使用浏览器的前进后退的时候会重新发送请求，没有合理地利用缓存，单页面无法记住之前滚动的位置 #后端路由 服务器根据url的不同返回不同的页面 #vue-router用来构建SPA #&lt;router-link&gt;&lt;/rout...
nuxt3中使用cookie-universal-nuxt的报错
09-28
在Nuxt3中使用cookie-universal-nuxt时，可能会出现以下错误: 1. "TypeError: Cannot read property 'get' of undefined" - 这个错误通常是由于未正确安装或配置cookie-universal-nuxt模块导致的。请确保在nuxt.config.js文件中正确添加了"cookie-universal-nuxt"作为模块，并且在asyncData方法中使用app.$cookies.get("token")时，app正确地被传递和引用。 如果您遇到上述错误，请尝试以下解决方法： - 确保已正确安装cookie-universal-nuxt模块。您可以通过运行命令npm install --save cookie-universal-nuxt来安装它。 - 确保在nuxt.config.js文件的modules数组中添加了'cookie-universal-nuxt'，并使用正确的语法。 - 检查您的asyncData方法是否正确引用了app对象，并且可以正确地使用app.$cookies.get("token")获取cookie值。 如果您遵循了上述步骤，但仍然遇到错误，请检查是否有其他配置或代码问题导致了该错误。您可以提供更多的代码片段和错误信息，以便更好地解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值