vue2实现路由的跳转

要实现路由的跳转，首先需要在 Vue 项目中安装并引入 Vue Router，具体步骤如下：

1. 在终端中输入以下命令安装 Vue Router：

   npm install vue-router --save

2. 在 main.js 中引入 Vue Router 并挂载到 Vue 实例上：

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import App from './App.vue'
   import Home from './components/Home.vue'
   import About from './components/About.vue'

   Vue.use(VueRouter)

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

   const router = new VueRouter({
     routes
   })

   new Vue({
     router,
     render: h => h(App),
   }).$mount('#app')

在上面的代码中，我们先引入 Vue Router 并通过 Vue.use() 方法注册路由器。接着，我们定义了两个组件 Home 和 About，然后创建了一个 routes 数组，其中包含了两个路由对象，每个路由对象都指定了一个路径和对应的组件。最后，我们通过 new VueRouter() 方法创建了一个路由器实例，并把 routes 作为参数传入。最后，我们把路由器实例挂载到 Vue 实例上。

3. 在组件中使用路由跳转

在组件中使用路由跳转分为两种情况：声明式和编程式。

(1) 声明式跳转

在模板中使用 `<router-link>` 组件可以实现声明式跳转，例如：

   <template>
     <div>
       <router-link to="/">Home</router-link>
       <router-link to="/about">About</router-link>
     </div>
   </template>

在上面的代码中，我们通过 `<router-link>` 组件指定了两个路由链接，分别对应着 Home 和 About 组件。当用户点击这两个链接时，路由器会自动跳转到对应的组件。

(2) 编程式跳转

在 JavaScript 中使用 `$router` 对象可以实现编程式跳转，例如：

   export default {
     methods: {
       goToHome() {
         this.$router.push('/')
       },
       goToAbout() {
         this.$router.push('/about')
       }
     }
   }

在上面的代码中，我们分别定义了两个方法，分别用于跳转到 Home 和 About 组件。在方法中，我们通过 `$router.push()` 方法指定了跳转的路径，路由器会自动跳转到对应的组件。

以上就是在 Vue2 中实现路由跳转的方法。