1.创建Vue项目
2.执行npm install (安装依赖)
3.安装Vue-router 和Elment ui(一定要注意版本vue2.0的Vue-router的路由版本不能太高推荐3.2.0)
4.安装完成后先配置路由信息
在component中创建文件夹(router),在创建index.js
5.在main.js中引入路由个element
6.在components中创建2个理由页面内容随意:
7.在App.vue中编写主要代码(直接复制即可)
<template>
<el-row class="tac">
<el-col :span="12">
<h5>默认颜色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="/demo" @click="goTo('/demo')">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="/index" @click="goTo('/index')">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
</el-col>
<router-view></router-view>
</el-row>
</template>
<script>
export default {
data() {
return {};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
goTo(path) {
alert(path)
this.$router.replace(path);
}
}
};
</script>
<style scoped>
.el-col-12{
width: 15%;
}
</style>
8.直接运行就成功了,我也是研究了好久中间出错很多次,希望能帮助到有需要的朋友