如何在 Nuxt 中将路由器内容渲染到 index.html

Question

我正在尝试构建一个仅包含一个页面（首页）的应用程序，并且我在嵌套在主页上的 div 中执行所有路由？我基本上是在寻找 Vue Router 的等价物。

如何更改我的设置，使路由器显示在首页上，而不是通过更改 url 来更改整个页面？

示例代码：

pages/index.vue

<template>
  <div class="container">
    <div class="panel_container">
      <h1>Left Panel</h1>
    </div>
    <div class="panel_container">
      <h1>Middle Panel</h1>
    </div>
    <div class="panel_container"> 
      <h1>Right Panel</h1>
      <div>
        // router-view goes here
      </div>
    </div>
  </div>
</template>

Answer 1

编辑：下面的 kissu 是完全正确的，请不要修改 .nuxt 因为它会在编译时被覆盖。

~~解决方案是以特定方式组织 .nuxt/layouts/default.vue：~~

<template>
  <YourFirstComponent />
  <Nuxt /> <!-- all routing goes here -->
  <OtherComponent />
</template>

~~这种方式，将始终出现在首页上，其余的在~~

中处理

Answer 2

我不确定您打算如何同时拥有两件事：允许 components/pages 更改但不更新路径的路由器。

因为如果你不想改变路径，这基本上就是一个锚（Table of Contents）：https://www.w3schools.in/html-tutorial/anchor/

如果你只想要父页面，为了保持相同，你需要配置一些嵌套路由：https://nuxtjs.org/docs/2.x/features/file-system-routing#nested-routes

与nuxt-child组件配对，尤其是针对这种架构

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

或者您也可以使用 layouts，确实如此。在您的所有页面上使用一个统一的包装器。

如何在 Nuxt 中将路由器内容渲染到 index.html

How to render router content onto index.html in Nuxt

nuxt.js

router