vue编程式路由跳转

### 实现编程式路由跳转

在 Vue.js 中，编程式路由跳转允许开发者通过 JavaScript 动态改变当前路径。这可以通过 `this.$router` 对象的方法来完成。

#### 使用 `push()` 方法进行页面跳转

当需要向浏览器的历史栈中添加一条新的记录时，可以使用 `push()` 方法。此方法不会触发整个页面的重新加载，而是仅更新视图部分的内容[^1]。

// 在组件的 methods 属性内定义一个用于跳转的方法
methods: {
  pushShow(m) {
    this.$router.push({
      name: 'xiangqing',
      query: { id: m.id, title: m.title }
    });
  }
}

上述代码片段展示了如何在一个名为 `m` 的对象传递给目标页面作为查询参数的情况下执行一次页面跳转操作。这里使用的 `name` 参数对应于配置好的路由名称，而 `query` 则用来携带附加的数据[^2]。

#### 定义路由器实例

为了使上面的例子能够正常工作，在项目初始化阶段还需要设置好相应的路由规则：

import VueRouter from "vue-router";
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';

export default new VueRouter({
  routes:[
    {
      path: '/component-a',
      name: 'ComponentA',
      component: ComponentA,
    },
    {
      path: '/component-b/:id?',
      name: 'ComponentB',
      component: ComponentB,
    }
  ]
});

这段代码说明了怎样导入必要的模块以及创建一个新的 `VueRouter` 实例，并将其导出以便在整个应用程序中使用。注意这里的 `routes` 数组包含了多个路由条目，每个条目都指定了对应的 URL 路径、名称和关联的组件[^4]。

#### 替换历史记录中的最后一条记录

如果希望不是增加新纪录到浏览历史里，而是覆盖掉最近的一次访问，则应该采用 `replace()` 函数代替 `push()`. 这样做可以在某些场景下提供更好的用户体验，比如防止用户点击返回按钮回到前一页[^5].

this.$router.replace('/new-url');