客户端渲染的虚拟DOM树不匹配

时间:2019-10-29 11:38:20

标签: javascript vue.js nuxt.js

我有以下问题:

在标题中,您可以阅读我的错误消息。 我的layouts/default.vue中有一个代码,用于检查我是否在此浏览器中存储了cookie。 如果是这种情况,我会从Cookie中获取数据并将其存储在我的store/index.vue

if (getCookie("jwt") != null) {
    this.$store.commit("storageToken", getCookie("jwt"));
}

在我的商店中,我得到了以下代码:

storageToken: function(state, payload) {
   state.token = payload;
   state.loggedIn = true;
},

现在的问题是state.loggedIn。如果我将其从false设置为true,则会显示错误,因为在layouts/default.vue中有一个nuxt-link像这样:

 <nuxt-link v-if="$store.state.loggedIn" class="loginbtn" to="dashboard">Dashboard</nuxt-link>

如果我删除了nuxt-link标签,则loggedIn的值将被更改而不会出现问题。

如果我将其包装在client-only中,我找到了一种使其工作的方法。

 <client-only>
    <nuxt-link v-if="$store.state.loggedIn" class="loginbtn" to="dashboard">Dashboard</nuxt-link>
 </client-only>   

现在可以使用,但是我现在遇到的问题是SEO问题。我的实习生链接现在对Google搜寻器可见。当我分析我的网站时,它说“找不到任何实习链接”

那么我该如何再次进行这项工作?我在Google上也找不到答案

0 个答案:

没有答案