非专业前端,局限性较高,有些问题看起来很小,但是初次接触很棘手,需要查找很多博客,内容也很杂。以下只是过程中总结下来的,要解决的就是标题中的三个问题。
这是我需要达成的效果。
1.第一个是进入导航菜单切换局部页面。
(1)在index.js中配置路由的时候作为导航页的子级。
(2)vue页面,<router-view/>他会根据当前地址栏的路径在<el-main>这个组件的位置上给你展示
相应的局部页面。
2.完成1之后,我们可以看到这个页面的基本结构如下图。
需要继续解决一些问题,问题一,进入页面的时候默认展示“订阅管理”这个子级的内容。问题二,在刷新的时候,选中的菜单不会改变(不会丢失)。
对于问题一,重定向。也就是在进入该页面之前重定向到某个子级。
第二个问题,刷新之后保持不变,就是让activeIndex始终指向当前地址栏这个路径。
3.贴代码
index.js:
export default new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/menu',
component: Menu,
redirect: '/paper',
children: [
{
path: '/paper',
component: Paper
},
{
path: '/user',
component: User
},
{
path: '/order',
component: MyOrder
}
]
}
]
})
menu页面:
<template>
<div>
<el-container>
<el-aside width="200px">
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
@select="handleSelect"
router
style="
height: 100vh;
border: 1px solid #eee;
margin: 0;
border: 0;
padding: 0;
"
>
<el-menu-item index="/paper">
<i class="el-icon-notebook-2"></i>
<span slot="title">订阅管理</span>
</el-menu-item>
<el-menu-item index="/user">
<i class="el-icon-user-solid"></i>
<span slot="title">个人信息管理</span>
</el-menu-item>
<el-menu-item index="/order">
<i class="el-icon-s-order"></i>
<span slot="title">订单管理</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<router-view/>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
name: "menu",
data() {
return {
activeIndex: this.$route.path,
}
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
},
}
</script>