el-menu 导航栏学习(1)

最简单的导航栏学习跳转实例效果:

(1)index.js路由配置:

import Vue from 'vue'

import Router from 'vue-router'

import NavMenuDemo from '@/components/NavMenuDemo'

import test1 from '@/components/test1'

import test2 from '@/components/test2'

import test3 from '@/components/test3'

Vue.use(Router)

export default new Router({

routes: [{

path: '/',

name: 'NavMenuDemo',

component: NavMenuDemo,

children: [{

path: '/test1',

name: 'test1',

component: test1

}, {

path: '/test2',

name: 'test2',

component: test2

}, {

path: '/test3',

name: 'test3',

component: test3

},]

}]

})

(2)NavMenuDemo.vue

<template>

<el-container>

<el-aside width="200px">

<el-menu

default-active="1"

class="el-menu-vertical-demo"

router

>

<el-menu-item index="/test1"

@click="$router.push({ path: '/test1' })"

>

<i class="el-icon-menu"></i>

<span slot="title">导航二</span>

</el-menu-item>

<el-menu-item index="/test2"

@click="$router.push({ path: '/test2' })"

>

<i class="el-icon-document"></i>

<span slot="title">导航三</span>

</el-menu-item>

<el-menu-item index="/test3"

@click="$router.push({ path: '/test3' })"

>

<i class="el-icon-setting"></i>

<span slot="title">导航四</span>

</el-menu-item>

</el-menu>

</el-aside>

<el-main>

<router-view></router-view>

</el-main>

</el-container>

</template>

<style>

.el-aside {

height: 100vh;

text-align: center;

}

.el-main {

background-color: #E9EEF3;

}

</style>

(3)test1.vue

<template>

<p>1</p>

</template>

(4)test2.vue

<template>

<p>2</p>

</template>

最简单的导航栏配置如上图所示,项目中的文件结构如下所示

相关推荐
陶甜也10 小时前
ThreeJS曲线动画:打造炫酷3D路径运动
前端·vue·threejs
梁辰兴1 天前
企业培训笔记:外卖平台后端--套餐管理模块--新建套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
是梦终空2 天前
计算机毕业设计241—基于Java+Springboot+vue的爱心公益服务系统(源代码+数据库+11000字文档)
java·spring boot·vue·毕业设计·课程设计·毕业论文·爱心公益系统
麦麦大数据3 天前
D025 摩托车推荐价格预测可视化系统|推荐算法|机器学习|预测算法|用户画像与数据分析
mysql·算法·机器学习·django·vue·推荐算法·价格预测
七仔的博客3 天前
Vue视差标题背景
vue·博客·动画·视差
梁辰兴3 天前
企业培训笔记:外卖平台后端--套餐管理模块--回显套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
Olrookie3 天前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
duansamve3 天前
Vue3和vue2的Diff算法有何差异?
vue·vue3·vue2·diff
java_强哥3 天前
vue3-tree-org实现组织架构图展示
vue
huangyiyi666664 天前
轮询那些事儿
javascript·前端框架·vue·js