Vue.js 中用 History 路由按路径展示不同内容并保持公共部分不变的方法

在Vue.js开发中，实现按路径展示不同内容同时保持公共部分不变是一个常见需求。History路由模式能很好地满足这一需求，下面就来详细介绍实现方法。

要理解History路由模式。与Hash路由不同，History路由使用浏览器的历史记录栈来管理路由，路径看起来更像传统的网站路径，用户体验更好。

在Vue项目中使用History路由，需在创建Vue Router实例时进行配置。例如：

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

这里定义了两个路由路径/home和/about，分别对应不同的组件。

要实现公共部分不变，可使用Vue的组件嵌套和路由嵌套。创建一个公共的布局组件，如App.vue，它包含导航栏、侧边栏等公共部分，以及一个<router-view>标签，用于渲染不同路径对应的组件内容。

<template>
  <div>
    <header>公共头部</header>
    <router-view></router-view>
    <footer>公共底部</footer>
  </div>
</template>

当用户访问不同路径时，Vue Router会根据路径匹配对应的组件，并将其渲染到<router-view>标签所在位置，而公共部分则保持不变。

为了确保在切换路由时页面能正确过渡，可以使用Vue Router提供的导航守卫。例如，在beforeEach导航守卫中可以进行一些权限验证或数据加载操作。

router.beforeEach((to, from, next) => {
  // 进行一些操作
  next();
});

还可以使用动态路由来处理一些具有相似结构但参数不同的路径。通过在路由路径中使用动态参数，如/user/:id，可以根据不同的参数值展示不同的用户信息。

通过合理配置History路由、使用组件嵌套和导航守卫等技术，就能在Vue.js中按路径展示不同内容并保持公共部分不变，为用户提供良好的交互体验。