vue2项目用路由完成页面跳转

Vue2项目中，可以使用Vue Router库来实现页面之间的动态导航。以下是基本步骤：

1. **安装依赖**：
首先需要在项目中安装`vue-router`，可以在命令行中运行：

   npm install vue-router

或者如果使用的是yarn，则使用：

   yarn add vue-router

2. **配置`router.js`**：
在项目的src目录下创建一个名为`router.js`的文件，配置路由信息。例如，你可以定义一个简单的路由：

   import Vue from 'vue'
   import Router from 'vue-router'

   Vue.use(Router)

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

   export default new Router({
     routes
   })

3. **在组件中使用`this.$router`**：
在每个需要导航的组件里，你可以使用`this.$router`对象来导航。比如，点击按钮跳转到另一个页面：

   <button @click="goToAboutPage">访问关于</button>

   // 在对应的组件内
   methods: {
     goToAboutPage() {
       this.$router.push('/about')
     }
   }

4. **设置全局守卫（如需权限控制）**：
如果有需要，在Vue实例中注册路由守卫（如beforeEach），以在每次导航前检查用户权限。

5. **在App.vue中使用`<router-view>`**：
App.vue中添加`<router-view>`标签，用于渲染当前匹配到的路由组件。

6. **通过`<router-link>`进行懒加载和预加载**：
使用`<router-link>`标签可以直接导航并激活相应的链接。