<think>
我们被要求提供
一个使用
Element UI和
Vue Router实现
导航栏跳转路由的
完整项目示例。根据引用内容，我们可以总结出关键点：
1. 在el-menu组件上设置`:router="true"`，这样
菜单项被
点击时会使用
vue-router进行跳转。
2. 每个
菜单项（el-menu-item）的index属性应该设置为路由的path（注意路径要以'/'开头，例如'/home'）。
3. 设置default-active为当前路由路径（this.$route.path），以确保当前激活的
菜单项与路由匹配。
此外，我们需要
一个路由配置文件（router/index.js）来定义路由。
以下是
一个完整的项目示例步骤：
步骤1：创建
Vue项目并安装依赖
步骤2：配置路由
步骤3：创建页面组件
步骤4：在
导航栏组件中使用
Element UI的Menu组件，并配置路由跳转
详细代码：
1. 创建项目并安装依赖（假设已创建
Vue项目）：
```bash
npm install
element-
ui vue-router --save
```
2. 在src目录下创建router/index.js文件，配置路由：
```javascript
import
Vue from '
vue'
import Router from '
vue-router'
import Home from '@/views/Home'
import About from '@/views/About'
Vue.use
(Router
)
export default new Router
({
routes: [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About }
]
}
)
```
3. 创建两个页面组件（在src/views目录下）：
- Home.
vue
```
vue
<template>
<div>首页</div>
</template>
```
- About.
vue
```
vue
<template>
<div>关于我们</div>
</template>
```
4. 在App.
vue（或某个布局组件）中，使用
Element UI的Menu组件，并设置路由跳转：
```
vue
<template>
<div id="app">
<el-menu
:router="true"
:default-active="$route.path"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<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 {
name: 'App'
}
</script>
```
5. 在main.js中引入
Element UI：
```javascript
import
Vue from '
vue'
import
ElementUI from '
element-
ui'
import '
element-
ui/lib/theme-chalk/index.css'
import App from './App.
vue'
import router from './router'
Vue.use
(ElementUI)
new
Vue({
router,
render: h => h
(App
)
}
).$mount
('#app'
)
```
这样，当
点击菜单项时，就会跳转到
对应的路由，并且当前激活的
菜单项会高亮。
注意：如果路由有嵌套，或者需要更复杂的
菜单结构（比如子
菜单），可以使用el-submenu，并且同样设置index为路由路径。
引用说明：
根据引用[1]和引用[2]的内容，我们实现了
导航栏跳转的基本配置，包括设置`router`属性、index绑定路由路径、以及设置default-active为当前路由路径。
相关问题：
1. 如何在
Element UI导航菜单中处理嵌套路由？
2. 如何实现动态
菜单（根据权限生成不同的
菜单项）？
3. 在
Vue2中使用
Element UI菜单时，如何避免重复
点击同一路由时的错误提示？
注意：由于用户要求
完整的项目示例，以上代码已经能够构成
一个最小可运行示例。用户可以根据需要扩展。
</think>以下是使用
Element UI 和
Vue Router 实现
导航栏跳转路由的
完整项目示例，结合引用内容和最佳实践：
### 项目结构
```bash
src/
├── router
│ └── index.js # 路由配置
├── views/ # 页面组件
│ ├── Home.
vue
│ ├── Device.
vue
│ ├── Params.
vue
│ └── Picture.
vue
├── components
│ └── NavMenu.
vue #
导航栏组件
└── App.
vue
```
### 核心代码实现
1. **路由配置
(`src/router/index.js`
)**
```javascript
import
Vue from '
vue'
import Router from '
vue-router'
import Home from '@/views/Home.
vue'
import Device from '@/views/Device.
vue'
Vue.use
(Router
)
export default new Router
({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/device', // 注意：路径必须以/开头
name: 'Device',
component: Device
},
// 其他路由...
]
}
)
```
2. **
导航栏组件
(`src/components/NavMenu.
vue`
)**
```
vue
<template>
<el-menu
:router="true"
:default-active="$route.path"
mode="horizontal"
>
<el-menu-item index="/">
<i class="el-icon-s-home"></i>
<span>首页</span>
</el-menu-item>
<el-menu-item index="/device">
<i class="el-icon-cpu"></i>
<span>设备管理</span>
</el-menu-item>
<!-- 其他
菜单项 -->
</el-menu>
</template>
<script>
export default {
watch: {
// 路由变化时更新激活
菜单
'$route'
(to
) {
this.$nextTick
(() => {
this.$refs.menu.activeIndex = to.path
}
)
}
}
}
</script>
```
3. **主应用入口
(`src/App.
vue`
)**
```
vue
<template>
<div id="app">
<NavMenu />
<router-view class="main-content"/>
</div>
</template>
<script>
import NavMenu from '@/components/NavMenu.
vue'
export default {
components: { NavMenu }
}
</script>
```
### 关键配置说明（引用[1][^1]）
1. **`:router="true"`**
启用
Vue Router 集成模式，使
菜单点击触发路由跳转
2. **`index` 属性**
必须设置为
完整路由路径（含开头的`/`），如：
```html
<el-menu-item index="/device">设备管理</el-menu-item>
```
3. **`default-active`**
绑定 `$route.path` 实现路由变化时自动更新激活状态：
```html
:default-active="$route.path"
```
###
完整流程演示
```mermaid
graph TD
A[用户
点击导航菜单] --> B[Menu组件index属性]
B --> C[匹配router/index.js中的path]
C --> D[加载
对应组件]
D --> E[RouterView渲染组件]
E --> F[更新$route.path]
F --> G[Menu高亮当前项]
```
### 常见问题解决方案
1. **
菜单不高亮**
确保 `default-active` 绑定的是 `$route.path` 而非 `$route.name`
2. **路由跳转失败**
检查路由配置中的 `path` 是否以 `/` 开头（引用[2][^2]）
3. **嵌套路由处理**
使用 `el-submenu` 实现多级
菜单：
```
vue
<el-submenu index="/system">
<template #title>系统管理</template>
<el-menu-item index="/system/users">用户管理</el-menu-item>
<el-menu-item index="/system/roles">角色管理</el-menu-item>
</el-submenu>
```
> 实际项目示例：
> [GitHub -
vue2-
element-admin]
(https://github.com/PanJiaChen/
vue-
element-admin
)（企业级实践）
> [Gitee -
vue2-
element-tpl]
(https://gitee.com/mirrors/
vue-admin-template
)（精简模板）
本文详细介绍了在Vue项目中如何配置路由和左侧导航，重点讲解了如何在Home组件下注册所有可用导航页面的路由配置，并解决了重复点击同一导航项导致的错误。
扫一扫
5336
到【灌水乐园】发言
