木灵鱼儿
阅读:2137
解决报错:The client-side rendered virtual DOM tree is not matching server-rendered content
出现这个问题,往往是因为浏览器中的虚拟dom树和服务端dom不一致产生的,为什么会不同,举个例子:
我们v-if判断客户端是否存在localstorage.getItem("token")
,但实际上服务端永远不可能拿到,因为localstorage是浏览器客户端才有的东西。
那么服务端渲染的dom永远没有,你浏览器上又有了,那不是就产生冲突了。
于是就会报这个错,但是并不会影响页面的渲染。
解决的办法就是将这个v-if放到客户端才进行运行,nuxt提供了一个自定义标签:client-only
表示在这个标签内的内容,只有有客户端才会渲染运行,这样就可以让虚拟dom保持一致,且不会发生冲突。
<client-only>
...需要客户端运行的内容
</client-only>
当然,使用了这个标签,可能会导致$nextTick运行好几次。
更多的内容,可以查看下nuxt官方的解释:仅客户端组件
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
vue3 Fragment 片段
在vue2的时候,我们在编写组件时往往是需要提供一个根元素的,这个根元素会作为虚拟dom的差异算法依赖,但是有的时候往往会带来一些很难受的体验,比如会带来很多的无必要的元素嵌套,常见的嵌套应该就是div了,如果你曾经尝试写过递归一个导航组件的话。这个问题其实在react中也出现过,所以它在v16版本中提供了Fragments功能,它会将多个根元素的内容包裹在一个名为React.Fragment的元素下,这样就不需要多余的“根元素”;为此它还得在渲染时进行特殊处理,所以当时业界吹了一把react牛逼,重写了虚拟dom算法。在vue2阶段,我个人也尝试了好多办法,包括尝试使用这种方式:<...
关于使用this.$router对象进行跳转时产生重定向错误的解决方法
vue-router升级版本后,使用$router进行跳转时,将返回一个promise对象,这其实是好事,但是除了这个,官方对报错也做了调整。这里先看一下常见一个重定向错误:为什么产生这个错误,我在谷歌查了下,有这么一个解释:这是设计使然。为什么?阅读此评论。TL;DR:假设您在页面 A,然后单击一个按钮将您带到页面 B(有点像method: goToB() { router.push('/B'); }页面 A)。但是页面 B有一个导航守卫,将您发送到页面 C。此错误是让该goToB()功能知道路由器无法完成所需任务并且用户尚未登陆的一种方式/B。这很讨厌,但信息量很大这里最大的困惑是重...

lodash按需加载使用unionBy打包后使用报错:t is not a function 的问题解决方案
按需加载,在gzip面前根本不值一提,当然,该优化还是要优化,所以在使用了lodash-webpack-plugin插件后,在使用个别方法后就会出现问题,比如:unionBy;原因按需加载的插件,它的按需就是将你调用的方法单独提取出来,但是,如果提取的方法里面还用了其他方法,他可能无法识别,导致方法缺失,所以就会报错。报错代码<script> import _ from "lodash"; export default { methods: { test(arr){ return _.unionBy(arr, "key&...

nuxt 加快编译速度
nuxt嘴上说很快,但是其实热编译是很慢的,很墨迹,和vue cli这种对比起来,差了很多,经常改动一点东西想要看效果,编译要等一段时间。今天无聊去看了下nuxt模块库,看到这么一个插件:nuxt-build-optimisations有点牛皮,使用后,热编译速度肉眼可见的提升,官方的介绍说可以提升2-5倍的速度,实际测试中,冷启动速度没太大感觉,但是热编译速度确实是很满意。特此推荐!用法yarn add nuxt-build-optimisations安装完毕去nuxt.config.js里面激活模块export default { buildModules: ['nuxt-bui...

nuxt 一文读懂@nuxtjs/axios的用法
在nuxt中,有一个专门的axios版本:@nuxtjs/axios;但是由于nuxt的文档,或者说是资料不是很齐全(零散),初步了解后觉得这个插件并不是很方便,很多时候,我们都是模块化的axios写法,在使用@nuxtjs/axios时,会发现有点束手束脚,于是转而放弃使用,而是单独引入axios,然后一顿操作。当我们单独封装axios的时候,有没有这种想法:报错了能不能跳转到nuxt的错误页面?;但是实现时发现,除了在asyncData这些方法里面可以解构到error对象然后利用它跳转,好像在单独的一个js文件里面,没办法直接跳转。但是,如果我们使用@nuxtjs/axios,那么我...

nuxt mixins全局混入
全局混入我考虑到可能会有多个混入,如果把混入的内容全部写在同一个js文件里面,那是非常混乱的,所以我采用模块化的写法,其实就是导入导出而已,一种方式。具体用法和全局过滤器一样,创建插件,激活插件。在plugins目录下创建mixins文件夹,mixins里面创建一个index.js作为入口文件,然后再创建一个modules目录,用来存放mixin混入的方法。假设我们在modules/test.js下写了一个混入export default { methods: { test(){ console.log("我是一个全局混入方法"); }...
nuxt filters全局过滤器
nuxt 不能像传统的vue那样直接在main.js文件中添加全局过滤器,我们需要写一个插件,并在nuxt.config.js中启用在plugins目录下创建一个filters.js文件夹filters.jsimport Vue from "vue"; // 无内容占位符 Vue.filter("placeholder", (value) => { if (!value && value !== 0) return "--"; return value; });nuxt.config.jsexpo...
解决报错:Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.
这是一个奇葩的报错,因为他居然是因为模板vue文件没有设置name导致的。也就是说,如果要解决这个问题,在提示的模板文件上设置name属性即可。layouts/default.vueexport default { name: "default", }问题解决。

nuxt 路由鉴权
由于nuxt无法配置路由信息,所以我们常用的配置路由meta信息的路子就走不通了。nuxt官方也有对应的解决方案,大概流程如下:创建一个路由中间件auth,用于判断在对应的页面使用对应的路由中间件auth当用户进入该页面时,auth进行判断:重定向还是报错那么中间件怎么写就需要了解一下了。有token才允许进入页面在middleware目录创建一个auth.js文件auth.js:export default function ({ store, error }) { if (!store.state.user.token) { error({ message: ...
nuxt vuex持久化
老规矩,还是使用vue-peristedstateyarn add vue-peristedstate --dev安装完毕,在plugins目录创建一个localStorage.js文件localStorage.js:import createPersistedState from 'vuex-persistedstate' export default ({ store }) => { createPersistedState({ storage: localStorage, reducer(val) { return { // ...