layui 与 vue 混搭 解决 动态侧边栏

 前置条件   1.  layui 的侧边栏 就不写了官网有 2. 有权限列表 

1.引入 vue 和axios 

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. 在所有的跳转导航上加上   自定义 的 class="menu"   data-id="与导航栏的名字一致"

<dd class="menu" data-id="酒店轮播图">
	<a lay-href="page/hotel/content/homebannerlist.html">酒店轮播图</a>
</dd>

3.  动态显示导航栏代码

<script>
			var app = new Vue({
				el: '#App',
				data: {
					message: "111"
				},
				created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
					this.getAllList();
				},
				methods: {
					getAllList() {
						let menu = document.getElementsByClassName("menu");
						let that = this
						axios.post(findUserPermissionUrl,
								        {"id":JSON.parse(localStorage.getItem("loginUser")).currentRole},
								{
									headers: {
										'USER-ID': localStorage.getItem("userId"),
										"USER-TOKEN": localStorage.getItem("jwtToken")
									}
								}).then(function (res) {
									if(localStorage.getItem("roleCode")  != 5) {
										let data = res.data.result
										that.message = data
										for (let menuKey in menu) {
											if (menu[menuKey] == menu.length) {
												break;
											}
											let str = menu[menuKey].getAttribute("data-id")
											if (!data.includes(str)) {
												menu[menuKey].remove()
											}
										}
									}

						});
					}
				}
			})

		</script>