替换我的错误设计的适当方法是什么？

Question

我对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中。

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

Answer 1

Nuxt具有<nuxt-link>

<nuxt-link tag="div" to="/about">About</nuxt-link>