时间戳

首页 > 解决方案 > 如何在 Nuxt JS 中刷新孩子时呈现父母的头部标签？

nuxt.js - 如何在 Nuxt JS 中刷新孩子时呈现父母的头部标签？

问题描述

我在以下设置中有父页面和子页面

我在dashboard.vue 中的代码：

<template>

  <body class="hold-transition sidebar-mini layout-fixed">
    <div class="wrapper">
      <admin-navbar></admin-navbar>
      <main-sidebar></main-sidebar>
      <div class="content-wrapper">
        <NuxtChild />
      </div>

    </div>
  </body>
</template>

<script>
  export default {
    head() {
      return {
        link: [
          {
            rel: "stylesheet",
            href: "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"
          },
          {
            rel: 'stylesheet',
            href: '../adminPanel/plugins/fontawesome-free/css/all.min.css'
          },
          
        ],

        script: [
          {
            src: '../adminPanel/dist/js/adminlte.js',
            body: true
          },
          {
            src: '../adminPanel/dist/js/demo.js',
            body: true
          },
          {
            src: '../adminPanel/dist/js/pages/dashboard.js',
            body: true
          },
        ],
      }
    }
  }

</script>

在 MainSidebar.vue 组件中，我有以下内容：

<template>
 <li class="nav-item">
            <NuxtLink to="/vendor/dashboard/child1">
            <i class="nav-icon fas fa-tachometer-alt"></i>
            Child1
            </NuxtLink>
          </li>
          <li class="nav-item">
            <NuxtLink to="/vendor/dashboard/child2">
            <i class="nav-icon fas fa-tachometer-alt"></i>
            Child2
            </NuxtLink>
          </li>
</template>

在此设置中，一切正常，直到我在子页面中刷新页面。当我刷新任何子页面时，dashboard.vue 中定义的链接和脚本不再起作用。我正在获取dashboard.vue 文件的html 部分，而不是样式和js 的头部脚本。即使我刷新子页面，如何以它们工作的方式定义它们？

一个回旋处是在 nuxt.config.js 文件中声明样式和脚本链接。但我不想在全球范围内使用这些。仅适用于本页和儿童。

另一种解决方案可能是在我的所有子页面中使用相同的链接和脚本数组变量。但显然我认为这不会有效。

标签： nuxt.js

解决方案

绝对路径不是一个稳定可靠的解决方案，而是使用@or~运算符来引用静态资源。head()也不是引用内部/本地静态文件的正确方法（外部文件 URL 除外）

请注意，Nuxt您应该将静态内容放在assets目录

assets 目录包含未编译的资产，例如样式、图像或字体。

例如，如果您想在特定组件中导入 CSS 文件，我建议您这样做

component_1.vue

<style src="@/assets/adminPanel/plugins/fontawesome-free/css/all.min.css" scoped>
</style>

甚至对于 JS 文件：

<script>
import "@/assets/adminPanel/dist/js/adminlte.js" ;
export default {
// ...
}
</script>

对于自定义 JS 脚本，您还可以使用 Nuxt插件或中间件目录来获取全局脚本

推荐阅读