在 javascript 中实现 history 路由是一种使用 history api 来管理 web 应用程序中页面之间的导航而不重新加载整个页面的技术。为此，您可以使用各种库，最流行的库之一是 vue router。
Vue Router 是一个用于构建单页面应用程序（SPA）的路由器。它允许您定义页面路由，并使用组件动态呈现这些页面。它与 Vue.js 框架无缝集成，但也可以与其他 JavaScript 框架或库一起使用。
以下是使用 Vue Router 实现 History 路由的步骤：
- 安装 Vue Router：使用以下命令通过 npm 安装 Vue Router：
npm install vue-router
- 创建 Vue Router 实例：在您的 JavaScript 代码中，创建 Vue Router 实例并配置路由：
import VueRouter from 'vue-router';
import Vue from 'vue'; // Vue 也是必需的，即使您不使用它
Vue.use(VueRouter);
const routes = [
{
path: '/home',
component: Home,
},
{
path: '/about',
component: About,
},
];
const router = new VueRouter({
mode: 'history',
routes,
});- 配置 History 模式：将 mode 选项设置为 'history' 以启用 History 路由。这将允许您根据 URL 哈希值而不是 URL 哈希值来管理导航。
- 创建一个 Vue 根实例并使用路由器：在 Vue 根实例中，将 Vue Router 实例传递给 router 选项：
new Vue({
router,
el: '#app',
});- 使用路由链接进行导航：您可以使用 router-link 组件将按钮或链接映射到特定的路由：
主页 关于
- 侦听路由更改：您可以在 Vue 组件中侦听路由更改并根据需要执行操作：
export default {
created() {
this.$router.push('/home');
},
mounted() {
console.log(this.$route.path);
},
};通过遵循这些步骤，您可以使用 Vue Router 在 JavaScript 中轻松实现 History 路由。
