vue.js 在NuxtJS中使用nuxt-link或router-link时,如何初始化html元素的属性?

vc9ivgsu  于 2022-11-25  发布在  Vue.js
关注(0)|答案(1)|浏览(201)

我有两个页面indexblog,我想在渲染每个页面之前操作html的属性,比如将<html>设置为<html class="dark">,所以我实现了一个方法initDOM(),并在vue mounted钩子函数中调用它。当我使用<a></a>导航页面时,一切都很好。函数为:

initDOM() {
  let htmlObj = document.getElementsByTagName("html");
  htmlObj[0].setAttribute('class', 'dark')
}

但是当我使用<nuxt-link></nuxt-link>来导航页面时,DOM树并没有被我的initDOM()函数初始化,我发现这似乎是因为当我使用<a></a>时,进入一个新的网页时整个DOM树都被刷新了,而使用<nuxt-link></nuxt-link>时DOM树并没有被刷新,虽然用<a>替换<nuxt-link>效果很好,加载时间明显长于使用<nuxt-link>
有什么办法解决这个问题吗?

tp5buhyn

tp5buhyn1#

OP通过使用Pinia解决了这个问题,这样它就可以有一个成功工作的黑暗模式。

相关问题