一、用户列表
1.新建用户列表组件
在Components文件夹下新建user文件夹,在user文件夹下创建用户管理组件 Users.vue,在router/index.js中导入路由组件并在home这个路由规则的children属性中把user作为一个子规则定义进来
//router/index.js
import Users from '../components/user/Users.vue'
const router = new VueRouter({
index.js
routes: [
{
path: '/', redirect: '/mylogin' },
{
path: '/mylogin', component: myLogin },
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [
{
path: '/welcome', component: Welcome },
{
path: '/users', component: Users }
]
}
]
})
2.解决点击用户列表链接未高亮问题
点击链接的时候把对应的地址保存在sessionstorage中,当下一次刷新页面时把值取出来动态赋值给default-active属性,
所以给二级菜单el-menu-item绑定单击事件 @click="saveNavState('/' + subItem.path)"
定义函数:
// 保存链接的激活状态
saveNavState (activePath) {
window.sessionStorage.setItem('activePath', activePath)
}
此时点击用户列表链接sessionStorage中就出现了键:activePath,值为 /users
在data中定义数据保存激活的链接
// 被激活的链接地址
activePath: ''
把地址动态绑定到el-menu上
:default-active="activePath"
给activePath动态赋值,应当是整个home组件被创建的时候就立即从sessionStorage把值取出来,组件被创建的时候执行created生命周期函数,所以在created中获取
created () {
this.getMenuList()
this.activePath = window.sessionStorage.getItem('activePath')
},
最后注意在点击不同菜单链接时应该立即为activePath重新赋值
saveNavState (activePath) {
<