替换我的错误设计的合适方法是什么？答案

【问题标题】：What's the appropriate way to replace my wrong design?替换我的错误设计的合适方法是什么？
【发布时间】：2020-05-19 21:46:56
【问题描述】：

我有一个关于 nuxt.js 项目的问题，

我们知道 nuxt.js 会自动生成路由。

我有这样的页面结构：

头部有导航器，我想用它来切换页面（切换主体的内容）。

但是 nuxt.js 不喜欢 vue-router 有<router-view/>

<route-link></route-link>
<router-view/>

只有

<nuxt-link></nuxt-link>

所以我这样写代码结构：

<template>
  <div >

    <Header></Header>   <!-- the main body written in the Header -->

    <Footer></Footer>

  </div>
</template>

Header 组件：

    <navigator-component></navigator-component>

    <div>
      <Home v-show="$store.state.page_name == 'home' "></Home>
      <Search v-show="$store.state.page_name == 'search' "></Search>
      <Aboutus v-show="$store.state.page_name == 'about_us' "></Aboutus>
      <Contactus v-show="$store.state.page_name == 'contact_us' "> 
      </Contactus>
    </div>

但是有一个问题，URL不会切换，会停留在根URL。

那么，解决我的问题的合适方法是什么？如何设计代码结构？

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

Nuxt 有一个“路由器视图”。就是：<nuxt />。

这里的方法是使用布局。

布局目录中有一个default 文件。每个页面默认都有这个布局。

您可以简单地在这个默认布局文件中写入您的页面结构。

例如：

<template>
  <Header />
  <nuxt />
  <Footer />
</template>

<script lang="ts">
import Vue from 'vue';
import Header from '..';
import Footer from '..';

export default {
  components: {
    Header,
    Footer,
  },
};
</script>

【讨论】：