有了 history 路由，代码重复就再也不怕！
想必大家都不愿意每次创建新页面的时候，都重复一遍相同的代码吧？这次，我们就来探讨一下如何使用 javascript 实现在 history 路由，从而避免代码重复的烦恼。
何为 history 路由？
它是一种路由模式，能够在不刷新页面的情况下动态改变页面内容，同时浏览器地址栏中的 url 也随之更新。这使得网页导航更加顺畅，并避免了刷新页面带来的页面重新加载。
立即学习“Java免费学习笔记（深入）”；
实现方案
一个简洁有效的解决方案就是使用 vue-router。虽然它通常与 vue.js 框架搭配使用，但 vue-router 也可以独立于 vue.js 应用，仅用作路由库。
示例代码剖析
我们来编写一个示例，展示如何利用 vue-router 实现 history 路由：
我是公共部分
// subpages/page-a.html我是页面 a// subpages/page-b.html我是页面 b
关键代码解析
const routes = [
{
name: 'PageA',
path: '/a',
meta: {
template: '/subpages/page-a.html'
}
},
{
name: 'PageB',
path: '/b',
meta: {
template: '/subpages/page-b.html'
}
},
];
const router = new VueRouter({ mode: 'history', routes });
router.beforeEach(function (to, from, next) {
// 处理页面切换时的逻辑，例如移除旧页面、加载新页面等
});在 javascript 中，我们创建了一个 vuerouter 实例并定义了路由规则。在 beforeeach 钩子函数中，可以处理页面切换时的逻辑，例如移除旧页面和加载新页面。
另外，meta 属性用于指定子页面的模板文件路径。
具体操作
- 使用服务器配置 history 模式。
- 将 vuerouter 脚本包含在页面中。
- 为路由规则创建 json 文件或直接在代码中定义。
- 在 beforeeach 钩子函数中加载子页面。
通过这些步骤，你就可以使用 history 路由在不刷新页面的情况下动态切换内容，从而摆脱代码重复的烦恼。
