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>

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

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
sunbyte7 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
普宁彭于晏10 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
你喜欢喝可乐吗?14 小时前
RuoYi-Cloud 验证码处理流程
java·spring cloud·微服务·vue
魂兮归乡17 小时前
B2、进度汇报(— 25/06/16)
经验分享·spring boot·ai·vue·团队开发·课程设计·web app
灰海18 小时前
封装WebSocket
前端·网络·websocket·网络协议·vue
布兰妮甜1 天前
开发在线商店:基于Vue2+ElementUI的电商平台前端实践
前端·javascript·elementui·vue
大菠萝学姐2 天前
基于Spring Boot和Vue的高校图书馆座位预约系统的设计与实现
java·vue.js·spring boot·后端·python·mysql·vue
黄焖鸡能干四碗2 天前
系统安全设计方案,软件系统安全设计方案
开发语言·数据库·安全·vue·系统安全
知识分享小能手2 天前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3