Vue3中如何在/:id同一路由下禁用浏览器前进后退功能？

核心思路 #

通过全局路由守卫拦截同动态路由（/:id）下的浏览器前进后退跳转，同时放行跨路由的导航；另外从根源上减少历史栈中的同路由条目，避免不必要的跳转触发。

步骤1：标记目标动态路由 #

在路由配置中，给需要拦截的动态路由添加meta标记，方便后续精准判断：

// router/index.js（Vue3示例）
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/:id',
    name: 'DynamicPage',
    component: () => import('../views/DynamicPage.vue'),
    meta: { isDynamicIdRoute: true } // 标记这是需要拦截的动态路由
  },
  {
    path: '/lists',
    name: 'Lists',
    component: () => import('../views/Lists.vue')
  },
  {
    path: '/news',
    name: 'News',
    component: () => import('../views/News.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

步骤2：全局前置守卫拦截同路由跳转 #

通过全局前置守卫对比from和to的路由类型，同时区分是否为浏览器前进后退触发的导航：

// 继续在router/index.js中添加
let isBrowserNavigation = false

// 监听浏览器前进后退事件
window.addEventListener('popstate', () => {
  isBrowserNavigation = true
})

router.beforeEach((to, from, next) => {
  const fromIsDynamic = from.meta?.isDynamicIdRoute
  const toIsDynamic = to.meta?.isDynamicIdRoute

  // 仅拦截浏览器前进后退触发的同动态路由跳转
  if (fromIsDynamic && toIsDynamic && isBrowserNavigation) {
    next(false) // 取消当前导航，页面和URL保持不变
    isBrowserNavigation = false // 重置标记，不影响后续正常导航
  } else {
    isBrowserNavigation = false
    next() // 放行所有其他情况的导航
  }
})

export default router

步骤3：API更新数据时避免新增历史记录 #

当你通过API更新页面数据并同步URL时，使用router.replace()而非router.push()，这样不会在浏览器历史栈中新增条目，从根源上减少前进后退的触发场景：

// 组件内API更新数据时的URL同步代码
async function updateData(newId) {
  const data = await fetch(`/api/data/${newId}`)
  // 更新页面数据...
  
  // 用replace替换当前历史记录，不新增条目
  router.replace({ params: { id: newId } })
}

Vue2 适配示例 #

如果使用Vue2，路由守卫和路由创建方式略有不同，核心逻辑一致：

// router/index.js（Vue2示例）
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/:id',
    name: 'DynamicPage',
    component: () => import('../views/DynamicPage.vue'),
    meta: { isDynamicIdRoute: true }
  },
  {
    path: '/lists',
    name: 'Lists',
    component: () => import('../views/Lists.vue')
  },
  {
    path: '/news',
    name: 'News',
    component: () => import('../views/News.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

let isBrowserNavigation = false

window.addEventListener('popstate', () => {
  isBrowserNavigation = true
})

router.beforeEach((to, from, next) => {
  const fromIsDynamic = from.meta?.isDynamicIdRoute
  const toIsDynamic = to.meta?.isDynamicIdRoute

  if (fromIsDynamic && toIsDynamic && isBrowserNavigation) {
    next(false)
    isBrowserNavigation = false
  } else {
    isBrowserNavigation = false
    next()
  }
})

export default router

关键说明 #

• 使用meta标记而非直接匹配路径，可灵活扩展（比如后续新增其他动态路由时，无需修改守卫逻辑）。
• next(false)会完全取消当前导航，用户点击前进后退时页面不会发生变化。
• 区分popstate事件，确保仅拦截浏览器前进后退操作，不影响用户手动输入URL或代码触发的正常跳转。

内容的提问来源于stack exchange，提问作者lgtits