vue2 怎么跳转路由

在 Vue.js 2.x 中跳转路由需要使用 `router-link` 组件或者编程式导航。

### 使用 router-link 组件

`router-link` 组件是 Vue.js 自带的路由链接组件，它会自动渲染成一个 `<a>` 标签，点击链接时可以跳转到对应的路由。可以在模板中使用 `router-link` 组件来创建路由链接，例如：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>

上述代码中，`to` 属性指定了链接的目标路由路径。

### 编程式导航

除了使用 `router-link` 组件，还可以使用编程式导航来实现路由跳转。可以在 Vue 组件中使用 `$router` 对象来跳转路由，例如：

// 在组件中使用 $router 对象
this.$router.push('/')
this.$router.push({ name: 'about' })
this.$router.push({ path: '/contact' })

`$router.push` 方法可以接收一个字符串路径、或者一个包含路径和查询参数的对象。另外，还可以使用 `$router.go` 方法来实现前进或后退，例如：

// 后退
this.$router.go(-1)

// 前进
this.$router.go(1)

需要注意的是，在组件中可以通过 `this.$router` 来访问 `$router` 对象，而在非组件代码中可以通过 `import { router } from '@/router'` 来引入路由实例，并访问 `$router` 对象。