vue2路由跳转页面

在Vue 2中，可以使用vue-router进行页面的路由跳转。以下是一个简单的例子：

首先，确保你已经安装并设置了vue-router。

1. 安装vue-router（如果你使用的是Vue CLI创建的项目，这一步骤通常已经完成）:

npm install vue-router

2. 在你的Vue项目中设置vue-router。在src目录下创建一个router文件夹，并在该文件夹中创建index.js文件:

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import HomePage from '@/components/HomePage';
import AboutPage from '@/components/AboutPage';
 
Vue.use(Router);
 
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage,
    },
    {
      path: '/about',
      name: 'about',
      component: AboutPage,
    },
  ],
});
 
export default router;

3. 在main.js中引入并使用router:

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

4. 在你的Vue组件中，可以使用编程式导航或者声明式导航进行路由跳转。

编程式导航示例：

// 在Vue组件中
export default {
  methods: {
    goToAboutPage() {
      this.$router.push({ name: 'about' });
    }
  }
}

声明式导航示例：

<!-- 在Vue模板中 -->
<template>
  <div>
    <router-link to="/about">About</router-link>
  </div>
</template>

以上代码展示了如何在Vue 2应用中设置和使用vue-router进行页面的路由跳转。