如何在 Vue.js 中使用 History 路由实现根据路径展示不同内容和保持公共部分不变？

在 Vue.js 项目里，使用 history 模式的路由可以让 URL 看起来像普通的多页站点，不带井号，而且能在切换路径时只更新页面中变化的部分，导航栏、侧边栏等公共结构始终保留。这背后依赖 vue-router 提供的嵌套路由能力和浏览器历史 API。

为什么选择 History 路由

默认的 hash 模式以 # 分割路径，虽然兼容性好，但对搜索引擎和用户都不够友好。history 模式利用 HTML5 的 pushState 与 replaceState，让路由路径变成正常的 URL 形式，例如 /user/profile，同时不触发整页刷新。

基础路由配置

首先安装并初始化 vue-router，将模式设为 history，并定义嵌套路由。父路由承载公共布局，children 中的路由对应不同内容区。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Layout from './components/Layout.vue';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      { path: '', component: Home },
      { path: 'about', component: About }
    ]
  }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

公共布局组件写法

Layout 组件里用 <router-view> 作为子路由出口，外部的结构如头部和底部不会随路由切换重新创建。

<template>
  <div class="app">
    <header>这是公共头部</header>
    <main>
      <router-view></router-view>
    </main>
    <footer>这是公共底部</footer>
  </div>
</template>

<script>
export default {
  name: 'Layout'
};
</script>

内容组件示例

Home 与 About 是纯内容组件，只关心自己区域要展示什么，不需要重复写公共部分。

<template>
  <div>
    <h3>首页内容</h3>
    <p>只有这一块会随路径变化。</p>
  </div>
</template>

服务端 fallback 处理

使用 history 模式后，直接访问或刷新 /about 这类路径时，浏览器会向服务器请求该地址。若服务端未配置，会返回 404。开发环境 vue-cli 已处理，生产环境需让服务器把所有未知路径回退到 index.html。

小结

通过 vue-router 的 history 模式加嵌套路由，就能在 Vue.js 中按路径展示不同内容，同时保持公共部分不变。核心是把不变的结构提取为父组件，变化的内容放到 children 路由，并注意生产环境的服务端回退配置。

Vue.jsHistory路由vue-router组件复用嵌套路由修改时间：2026-07-24 23:24:24