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);
});
