Look at the effect first
Detailed steps
- Project structure design
Use vue-cli to create a new project and srccreate a new viewdirectory under the path to store the page;
Put the homepage under the indexpath, add two test pages, test1and test2:
- Modify the default route and page for project startup, make the project a SPA (single page application),
place the navigation bar on the start page after the project is created, which is the default page, and put the vuehello worldpage as a subpage in the subroute . The specific operations are as follows: - Put the element-ui navigation menu on the homepage (index)
- Copy the example of the navigation menu of the official website, as follows, and modify it as we want on this basis
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
- We do not consider secondary routing, so delete
<el-submenu> - Use
v-forto navigate menus and make routing dynamically configurable , the main file has Homeindex.vue, routing index.js, there are two test page, code, and is structured as follows:
src\view\index\index.vue：
<template>
<div class="index">
<el-header>
<el-menu
:default-active="this.$route.path"
class="el-menu-demo"
mode="horizontal"
router
@select="handleSelect"
>
<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-header>
<el-main>
<router-view></router-view>
</el-main>
</div>
</template>
<script>
export default {
data() {
return {
navList: [
{
name: "/", navItem: "首页" },
{
name: "/test1", navItem: "发现项目" },
{
name: "/test2", navItem: "社区动态" },
],
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
},
};
</script>
<style lang="scss" scoped>
.index {
width: 100%;
height: 100%;
}
</style>
Several points to note:
- To
el-menuaddrouter
What is this router?
From the official document of element, we can see that the router is whether to use the vue-router mode. Enabling this mode will use index as the path for routing jump when the navigation is activated.
This explains why el-menuVue's routing jump can be used after adding a router.
Based on this, we also need to configure the index that is used as the path for routing jump;
- Configure the index that is used as a path for routing jump
Put the navigation information in the navlist, and the name of each element is the sub-route, which is consistent with the path in the route file index.js.
default-activeSet as the current route (this.$route.path), so that the menu-item of the default page will be highlighted at startup.
The routing configuration is as follows:
src\router\index.js：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Index from '@/view/index/index.vue'
import test1 from '@/view/test/test1.vue'
import test2 from '@/view/test/test2.vue';
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Index',
component: Index,
children: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}, {
path: '/test1',
name: 'test1',
component: test1
}, {
path: '/test2',
name: 'test2',
component: test2
}, ]
}, ]
})
src\view\test\test1.vue 和 src\view\test\test2.vue
test1：
<template>
<div>test1</div>
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
</style>
test2 ：
<template>
<div>test2</div>
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
</style>