Vue-router编程式导航的两种实现代码

Vue-router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页应用变得非常容易。编程式导航是指在代码中手动改变路由的方式。Vue-router 提供了两种编程式导航的方法。

方法一：$router.push

// 在组件内部使用
this.$router.push({
  path: '/example',
  query: { id: '1' }
})

$router.push 的作用是向浏览器历史记录中添加一条新记录。它的参数可以是一个字符串或者一个对象。如果是字符串，那么它就是要跳转到的路径；如果是对象，那么它支持以下属性：

• path 跳转的路径
• query 传递的参数
• params 路由参数
• hash URL 上的 hash 值
• name 路由的名称

方法二：$router.replace

// 在组件内部使用
this.$router.replace({
  name: 'example',
  params: { id: '1' }
})

$router.replace 的作用是替换掉浏览器历史记录中的当前记录。它的参数和 $router.push 的参数一样。

除了 $router.push 和 $router.replace，Vue-router 还提供了其他的导航方法，比如 $router.go 可以实现前进和后退。但是 $router.push 和 $router.replace 是两种最常用的方式。

下面是两个示例：

示例一：跳转到一个新页面

// 在组件内部使用
this.$router.push('/newpage')

示例二：传递参数并跳转到另一个页面

// 在组件内部使用
this.$router.push({
  name: 'example',
  params: { id: '1' }
})

在这个示例中，我们向 /example 路径传递了一个参数 id，值为 1。这个参数可以在 example 组件中通过 $route.params.id 获取到。

以上就是关于 Vue-router 编程式导航的两种实现代码的详细攻略。