element-ui 导航栏跳转
时间: 2025-01-09 08:44:44 浏览: 52
### 使用 Element UI 和 Vue Router 实现导航栏页面跳转
为了实现带有导航栏的多页应用,在项目中集成 `Vue Router` 是必要的。通过创建路由实例并将其与组件关联起来,可以轻松管理不同页面之间的切换。
#### 设置路由模块
首先安装 `vue-router`:
```bash
npm install vue-router
```
接着定义路由配置文件 `src/router/index.js` 如下所示[^2]:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
// 导入各个页面对应的组件
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: About,
}
]
})
```
#### 构建导航条目
在主应用程序入口文件 `App.vue` 中构建顶部导航栏,利用 `<el-menu>` 组件来展示链接项,并绑定相应的事件处理函数用于触发页面间的转换操作[^1]。
```html
<template>
<div id="app">
<!-- 添加一个菜单 -->
<el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="/">主页</el-menu-item>
<el-menu-item index="/about">关于我们</el-menu-item>
</el-menu>
<!-- 路由出口 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
methods: {
handleSelect(key) {
this.$router.push({path:key});
}
}
}
</script>
```
上述代码片段展示了如何使用 `Element UI` 的菜单组件配合 `Vue Router` 来完成基本的页面间跳转逻辑。当用户点击某个菜单选项时会调用 `handleSelect()` 方法改变当前路径从而达到页面切换的效果。
阅读全文
相关推荐

















