紧接着上文《从零开始,详细讲解根据用户权限不同,动态生成路由导航菜单功能的实现(一)》所讲。
将路由界面渲染出来
App.vue
<template>
<transition name="fade">
<router-view></router-view>
</transition>
</template>
<script>
export default {
}
</script>
<style scoped>
/* Animation
------------------------------ */
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
建立一个简单的登录界面
login.vue
<template>
<el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
<el-form-item prop="userName">
<el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="dataFormSubmit()">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
dataForm: {
userName: "admin",
password: "admin"
}
};
},
methods: {
// 提交表单
dataFormSubmit() {
this.axios
.post("users/v1/login", {
params: {
username: this.dataForm.userName,
password: this.dataForm.password
}
})
.then(({ data }) => {
if (data && data.code === 0) {
this.$message({
type: "success",
message: "登录成功!"
});
this.$cookie.set("token", data.token);
this.$router.replace({ name: "home" });
} else {
this.$message.error(data.msg);
}
});
}
}
};
</script>
页面布局
现在我们要考虑一下登录成功后展示的页面的布局,我们就绘制一个简单的布局吧,main.vue为主入口页面,将侧边栏与其他子路由一起包含在里面
如下图所示:
- 除了全局路由以外,其他的路由界面都将在这个子路由页面处(黑色边框区域)渲染出来
- 动态路由菜单列表则将在侧边栏区域(蓝色边框区域)渲染出来
现在,让我们按照布局图开始对main.vue、home.vue 、main-sidebar.vue进行编写
main.vue
<template>
<div class="warp">
<div class="main-navbar">主入口main.vue</div>
<el-row class="main">
<el-col :span="4" class="main-sidebar">
<main-sidebar />
</el-col>
<el-col :span="20" class="router-view">
<router-view />
</el-col>
</el-row>
</div>
</template>
<script>
import MainSidebar from "./main-sidebar";
export default {
components: {
MainSidebar
}
};
</script>
<style scoped>
.warp {
position: relative;
height: 500px;
border: 2px solid red;
}
.main-navbar {
height: 100px;
width: 100%;
}
.main {
position: absolute;
top: 100px;
bottom: 0px;
width: 100%;
}
.main-sidebar {
border: 2px solid blue;
height: 100%;
text-align: center;
/* writing-mode: vertical-lr; */
}
.router-view {
border: 2px solid black;
height: 100%;
}
</style>
home.vue
<template>
<div>
home.vue
home.vue
home.vue
home.vue
</div>
</template>
<script>
export default {};
</script>
main-sidebar.vue
<template>
<div>侧边栏main-sidebar.vue</div>
</template>
<script>
export default {};
</script>
现在我们如果从登录页面登录成功并跳转的话,可以看到下图所示的界面:
并且可以在控制台看到类似于下图的输出信息:
首先对三个page1、page2、page3进行编写
page1.vue
<template>
<div>
page1.vue
page1.vue
page1.vue
page1.vue
</div>
</template>
<script>
export default {};
</script>
page2.vue
<template>
<div>
page2.vue
page2.vue
page2.vue
page2.vue
</div>
</template>
<script>
export default {};
</script>
page3.vue
<template>
<div>
page3.vue
page3.vue
page3.vue
page3.vue
</div>
</template>
<script>
export default {};
</script>
【重点】现在我们该对侧边栏进行动态路由菜单的加载了
修改*main-sidebar.vue*
<template>
<div>
<el-menu
default-active="home"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item index="home" @click="$router.push({ name: 'home' })">
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item
:index="item.name"
v-for="item in menuList"
:key="item.meta.menuId"
@click="goToRouter(item.name)"
>
<i class="el-icon-location"></i>
<span slot="title">{{item.meta.title}}</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
menuList: []
};
},
created() {
this.menuList = sessionStorage.getItem("dynamicMenuRoutes")
},
methods: {
goToRouter(name) {
this.$router.push({ name });
}
}
};
</script>
现在我们可以看到下图画面:
此时我们去点击不同页面可以到看:
至此,我们就已经实现了动态动态生成路由导航菜单的功能
(大家可以根据这个思路进行改变,只要理解了思路就可以快速的搭建出来了)
可能中间存在许多不足,还请见谅并指出,谢谢