Nuxt.js项目路由切换问题：如何设计页面结构实现URL同步？

嘿，我完全懂你现在的困扰——你相当于手动绕开了Nuxt自带的路由机制，自然会出现URL一直停在根路径的情况。咱们把思路拉回Nuxt的设计逻辑上，用它的原生特性就能轻松解决这个问题，还能让代码结构更规范：

1. 先调整页面文件结构，利用Nuxt的自动路由 #

Nuxt的核心优势之一就是基于pages目录自动生成路由，你不需要手动配置路由表。首先把你的页面组件移到pages文件夹下，对应关系如下：

pages/
├── index.vue       → 对应路由 /（首页）
├── search.vue      → 对应路由 /search
├── about-us.vue    → 对应路由 /about-us
└── contact-us.vue  → 对应路由 /contact-us

每个文件的文件名直接对应URL路径（注意用短横线命名，Nuxt会自动转换为kebab-case的路由），比如about-us.vue就对应/about-us。

2. 用布局文件复用Header和Footer #

Nuxt提供了layouts系统来处理公共布局，不用把页面内容塞进Header组件里。创建layouts/default.vue：

<template>
  <div class="app-container">
    <!-- 公共头部导航 -->
    <Header />
    <!-- 这个<Nuxt>标签就是Nuxt版的<router-view>，负责渲染当前路由对应的页面 -->
    <Nuxt />
    <!-- 公共底部 -->
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

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

之后你的所有页面（pages下的文件）都会自动使用这个默认布局，不需要每个页面都重复写Header和Footer。

3. 修改Header组件，用<nuxt-link>实现路由跳转 #

把你之前用store控制v-show的逻辑删掉，换成Nuxt的<nuxt-link>（它就是Vue中<router-link>的Nuxt版本）：

<template>
  <nav class="nav-bar">
    <nuxt-link to="/" active-class="active">首页</nuxt-link>
    <nuxt-link to="/search" active-class="active">搜索</nuxt-link>
    <nuxt-link to="/about-us" active-class="active">关于我们</nuxt-link>
    <nuxt-link to="/contact-us" active-class="active">联系我们</nuxt-link>
  </nav>
</template>

点击这些链接时，Nuxt会自动更新URL，同时把对应pages下的页面组件渲染到<Nuxt>标签的位置，完全不需要手动控制组件显示隐藏。

为什么你的原有方案会出问题？ #

你之前的做法是把所有页面组件都塞进Header里，用v-show结合store状态切换——本质上这是在同一个路由（根路径）下切换组件，并没有触发Nuxt的路由变化，所以URL自然不会更新。而且这种写法完全浪费了Nuxt的路由自动生成、服务端渲染优化等特性。

如果需要在页面切换时处理一些状态，比如记录当前页面名称，可以通过Nuxt的路由钩子（比如beforeRouteEnter）或者在布局组件中监听$route变化来实现，不用手动维护store的page_name状态。

内容的提问来源于stack exchange，提问作者user7693832