Vue.js路由beforeEnter中如何获取params或history.state并拦截非法访问？

你的核心问题是直接输入URL或刷新页面时，history.state会丢失，导致beforeEnter里的校验失效。以下是不用query参数、不触发params警告的可行方案：

1. 用sessionStorage做参数兜底存储 #

通过按钮跳转时先把questionNo存入sessionStorage，路由守卫和页面内做双重校验，确保只有正常跳转的用户能访问页面。

修改main.vue的跳转逻辑 #

function buttonClickFunc(Num) {
  // 跳转前将questionNo存入sessionStorage
  sessionStorage.setItem('questionNo', Num);
  return route.push({ name: 'question' });
};

修改router.js的路由守卫 #

{
  path: '/question',
  name: 'question',
  beforeEnter: (to, from, next) => {
    // 优先取history.state，兜底取sessionStorage的值
    const questionNo = history.state?.questionNo || sessionStorage.getItem('questionNo');
    if (!questionNo) {
      next('/main');
    } else {
      next();
    }
  }
}

2. 在question页面内增加二次校验（处理刷新场景） #

直接输入URL进入页面后history.state为空，依赖sessionStorage的值；如果用户刷新页面，sessionStorage仍保留，此时需要在页面挂载时再次校验，避免非法访问：

Vue3 示例（