时间戳

首页 > 解决方案 > 如何在 Nuxt 中将路由器内容渲染到 index.html

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

问题描述

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

如何更改我的设置以使路由器显示在首页上并且不会通过更改 url 来更改整个页面？

示例代码：

页面/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>

标签： nuxt.jsrouter

解决方案

我不确定你打算如何同时拥有两件事：一个允许组件/页面更改的路由器，而不是更新路径。

因为如果你不想改变路径，这基本上就是一个锚（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，确实如此。在所有页面周围有一个统一的包装器。

推荐阅读