vue实现前进后退

路由基础配置

在Vue项目中安装vue-router，配置路由表并设置mode: 'history'以启用HTML5 History模式（避免URL中出现#）。

// main.js
import VueRouter from 'vue-router';
import App from './App.vue';

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

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

导航按钮实现

通过<router-link>或编程式导航实现前进后退。

<template>
  <div>
    <router-link to="/about">跳转至About页</router-link>
    <button @click="goBack">后退</button>
    <button @click="goForward">前进</button>
  </div>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.go(-1); // 后退一步
    },
    goForward() {
      this.$router.go(1); // 前进一步
    }
  }
};
</script>

监听路由变化

通过watch或导航守卫监听路由变化，处理特定逻辑（如页面滚动位置）。

watch: {
  '$route'(to, from) {
    console.log('从', from.path, '跳转到', to.path);
  }
}

浏览器兼容性处理

若需支持旧版浏览器，可在路由配置中降级为hash模式，或配置服务器端支持History模式的重定向规则。

动态路由与状态保持

使用keep-alive缓存组件状态，避免后退时数据丢失。

<keep-alive>
  <router-view></router-view>
</keep-alive>