Vue router-link 改变元素的样式答案

【问题标题】：Vue router-link changes style of elementsVue router-link 改变元素的样式
【发布时间】：2021-03-01 23:19:29
【问题描述】：

我今天偶然发现了一个奇怪的问题。我曾经使用<a> 标签在链接之间切换，但现在我决定改用<router-link> 标签。出于某种原因，每当我从“/”转到不同的端点时，某些样式不会被应用，并且元素之间会出现不需要的间隙。

Before the refresh	After I refresh the page

图像也有类似的问题（它们在没有刷新的情况下被压扁）：

Before the refresh	After I refresh the page

这是Header 的简化代码（无样式）：

<template>
  <nav>
    <div v-for="link of links" :key="link.link">
      <router-link :to="link.link" exact>{{link.name}}</router-link>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'header',
  data() {
    return {
      links: [
        { name: "LINK1", link: "/" },
        { name: "LINK2", link: "/flights/" },
        { name: "LINK3", link: "/experience/" },
        { name: "LINK4", link: "/cakes/" }
      ]
    }
  }
};
</script>

我相信这是由于组件没有正确加载，因为在我刷新了一个渲染不正确的页面后，一切都恢复了正常。有没有办法在我被重定向之前等待内容完全加载？同样，我不介意使用<a> 标签，但我想我会先询问一些提示。

编辑：

这是幕后发生的事情，似乎高度因某种原因发生了变化。我用的是bootstrap的cdn链接，会不会因为它不能正确渲染..？

Before	After `Cltr + R`

【问题讨论】：

使用浏览器的开发工具检查元素并找出发生了什么。您问题中的示例代码根本不足以帮助您解决这个问题
好的，我刚刚更新了描述。

标签： javascript vue.js nuxt.js vue-router

【解决方案1】：

从代码中，我无法得出问题究竟出在哪里。路由器链接看起来不错。如果之前已经加载过，Vue 通常会尝试阻止加载内容以提高性能。这可能是这里的情况，但它应该是可以修复的。我会使用 Vue Devtools 而不是普通的开发工具。通过这种方式，您可以获得进一步的见解，并且您已经安装了它。如果您可以分享特定元素的屏幕截图，我可以尝试进一步分析问题！ :)

【讨论】：