vue3 history路由强制跳转

### 实现 Vue 3 History 模式下的路由强制跳转

在 Vue 3 中，为了实现在 `history` 模式的路由下进行强制跳转，通常会使用 `$router.push()` 方法来改变当前的应用程序视图而无需重新加载整个页面。此方法允许传递对象参数以指定要导航到的目标路径以及任何查询参数或嵌套的命名视图。

当遇到需要携带额外数据的情况时，可以通过设置 `query` 属性向目标 URL 添加查询字符串[^5]。下面是一个具体的例子展示如何执行带有附加信息的强制跳转：

this.$router.push({
    path: '/infoRecord',
    query: {
        planId: item.id,
        sectionId: this.id,
        sitename: localStorage.getItem('siteName')
    }
})

对于更复杂的场景，比如重定向或者替换历史记录条目，则可以分别调用 `$router.replace()` 或者利用编程方式触发特定的历史管理函数如 `replaceState` 和 `pushState` 来控制浏览器的历史栈行为[^2]。

需要注意的是，在采用 `history` 模式的时候，如果服务器端未做相应处理可能会导致刷新页面时报错找不到资源（即404错误）。为了避免这种情况发生，应该确保服务器被配置成无论请求哪个路径都返回应用入口文件（通常是 index.html），从而让前端接管后续的路由解析工作[^3]。

此外，创建一个新的路由实例并注册组件也是必要的步骤之一。这涉及到定义匹配规则并将它们映射至相应的组件上。例如，通过如下代码片段可以在项目里新增两个简单的页面组件，并为其分配对应的访问路径[^4]：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

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

export default router;