1:components
新建页面
2:打开app.vue
写代码
<template> <div> <el-col :span="2"> <el-menu :default-active="this.$route.path" router mode="horizontal" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" > <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name"> <template slot="title"> <i class="el-icon-s-platform"></i> <span> {{ item.navItem }}</span> </template> </el-menu-item> </el-menu> </el-col> <router-view class="menu-right" /> </div> </template> <script> export default { data() { return { navList: [ { name: "/views/chip", navItem: "地图碎片" }, { name: "/views/device", navItem: "地图设备" }, { name: "/views/params", navItem: "地图参数" }, { name: "/views/picture", navItem: "地图图片" }, ], }; }, methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); }, }, }; </script> <style> .menu-right { margin-left: 200px; } </style>
3:路由index.js
import Vue from 'vue' import Router from 'vue-router' import Chip from '@/views/chip' import HelloWorld from '@/components/HelloWorld' import Device from '@/views/device' import Params from '@/views/params' import Picture from '@/views/picture' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/views/chip', name: 'chip', component: Chip }, { path: '/views/device', name: 'device', component: Device }, { path: '/views/params', name: 'params', component: Params },{ path: '/views/picture', name: 'picture', component: Picture } ] })
4:新页面的内容,我写的比较简单,需要自己写下功能需求所在的代码
picture.vue
<template> <div> 我是picture页面 </div> </template> <script> </script> <style> </style>
5:效果就可以看了