element ui 路由页面跳转

Element UI 是一套为 Vue.js 开发的轻量级、组件化的前端 UI 框架，它提供了丰富的预设组件和灵活的可定制选项，使得构建响应式和高性能应用变得简单。在 Element UI 中，路由管理是通过 Vue Router 进行的，它是一个专门为 Vue.js 应用设计的第三方路由库。

要在 Element UI 中实现页面间的跳转，你可以遵循以下步骤：

1. 安装 Vue Router：

   npm install vue-router

2. 在 `main.js` 或相关配置文件中，引入并配置 Vue Router：

   import Vue from 'vue';
   import Router from 'vue-router';
   import Home from '@/views/Home.vue'; // 假设Home.vue是你的首页组件

   Vue.use(Router);

   const routes = [
     {
       path: '/',
       name: 'Home',
       component: Home,
     },
     // 添加更多路由配置...
   ];

   const router = new Router({
     routes,
   });

3. 在 Vue 组件中使用 `<router-link>` 标签进行页面链接：

   <el-menu>
     <el-menu-item :to="{ path: '/home' }">首页</el-menu-item>
     <!-- 更多菜单项，to属性指向路由配置中的path -->
   </el-menu>

4. 使用 `this.$router.push` 或 `this.$router.replace` 方法进行程序性的导航：

   this.$router.push('/about'); // 带有过渡效果的跳转
   this.$router.replace('/contact'); // 不带过渡效果的跳转