vue实现路由历史

Vue 实现路由历史管理

在 Vue 中，路由历史管理通常通过 Vue Router 实现。Vue Router 提供了两种历史记录模式：hash 模式和 history 模式。以下是具体实现方法。

使用 Hash 模式

Hash 模式使用 URL 的 hash（#）来模拟完整的 URL，兼容性较好，无需服务器额外配置。

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

Hash 模式的 URL 示例：
http://example.com/#/about

使用 History 模式

History 模式利用 HTML5 History API 实现无 # 的 URL，但需要服务器支持以避免 404 错误。

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

History 模式的 URL 示例：
http://example.com/about

服务器配置（History 模式）

在 History 模式下，直接访问非首页路由会返回 404，需配置服务器将所有请求重定向到 index.html。

Nginx 配置示例：

location / {
  try_files $uri $uri/ /index.html;
}

Apache 配置示例：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

导航守卫控制历史记录

Vue Router 的导航守卫可以拦截路由跳转，动态控制历史记录行为。

router.beforeEach((to, from, next) => {
  // 取消当前导航（无历史记录）
  if (to.meta.noHistory) {
    next(false);
  } else {
    next();
  }
});

编程式导航操作历史

通过 router 实例的方法可以主动操作历史记录栈：

• router.push()：添加新记录
• router.replace()：替换当前记录
• router.go()：前进/后退

// 添加新记录
router.push('/about');

// 替换当前记录（无历史痕迹）
router.replace('/profile');

// 后退一步
router.go(-1);

监听路由变化

通过 watch 或 onBeforeRouteUpdate 监听路由变化，响应历史记录更新。

import { onBeforeRouteUpdate } from 'vue-router';

onBeforeRouteUpdate((to, from) => {
  console.log('路由变化:', from.path, '→', to.path);
});