318 lines
10 KiB
HTML
318 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>模拟后台布局+路由使用</title>
|
|
<script src="https://unpkg.com/vue@2.6.13/dist/vue.js"></script>
|
|
<script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>
|
|
<style>
|
|
#root {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
#root .main {
|
|
width: 80%;
|
|
background: yellow;
|
|
font-size: 360px
|
|
}
|
|
|
|
#root div ul li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
#root div a {
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="root">
|
|
<!-- 菜单区域 -->
|
|
<menu-component :menus='menus'></menu-component>
|
|
<!-- 内容区域 -->
|
|
<main class="main">
|
|
<router-view></router-view>
|
|
</main>
|
|
</div>
|
|
<template id="menu-component">
|
|
<div>
|
|
<ul v-for="(item,index) in menus">
|
|
<router-link :to="item.path">
|
|
<li key="index">{{item.name}}</li>
|
|
<!-- <li key="index" v-if="!item.hidden">{{item.name}}</li> -->
|
|
</router-link>
|
|
|
|
<menu-component v-if="item.children" :menus="item.children"></menu-component>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
//创建router实例
|
|
let router = new VueRouter({
|
|
routes: [{
|
|
path: '/gansu',
|
|
component: {
|
|
template: '<div>甘肃省</div>'
|
|
}
|
|
}, {
|
|
path: '/lanzhou',
|
|
component: {
|
|
template: '<div>兰州市</div>'
|
|
}
|
|
}, {
|
|
path: '/chengguanqu',
|
|
component: {
|
|
template: '<div>城关区</div>'
|
|
}
|
|
}, {
|
|
path: '/anningqu',
|
|
component: {
|
|
template: '<div>安宁区</div>'
|
|
}
|
|
}, {
|
|
path: '/qilihequ',
|
|
component: {
|
|
template: '<div>七里河区</div>'
|
|
}
|
|
}, {
|
|
path: '/wuweishi',
|
|
component: {
|
|
template: '<div>武威市</div>'
|
|
}
|
|
}, {
|
|
path: '/liangzhouqu',
|
|
component: {
|
|
template: '<div>凉州区</div>'
|
|
}
|
|
}, {
|
|
path: '/minqinxian',
|
|
component: {
|
|
template: '<div>民勤县</div>'
|
|
}
|
|
}, {
|
|
path: '/gulangxian',
|
|
component: {
|
|
template: '<div>古浪县</div>'
|
|
}
|
|
}, {
|
|
path: '/tianshuishi',
|
|
component: {
|
|
template: '<div>天水市</div>'
|
|
}
|
|
}, {
|
|
path: '/qingyangshi',
|
|
component: {
|
|
template: '<div>庆阳市</div>'
|
|
}
|
|
}, {
|
|
path: '/shanxisheng',
|
|
component: {
|
|
template: '<div>陕西省</div>'
|
|
}
|
|
}, {
|
|
path: '/xianshi',
|
|
component: {
|
|
template: '<div>西安市</div>'
|
|
}
|
|
}, {
|
|
path: '/yulinshi',
|
|
component: {
|
|
template: '<div>榆林市</div>'
|
|
}
|
|
}, {
|
|
path: '/yananshi',
|
|
component: {
|
|
template: '<div>延安市</div>'
|
|
}
|
|
}, {
|
|
path: '/hubeisheng',
|
|
component: {
|
|
template: '<div>湖北省</div>'
|
|
}
|
|
}, {
|
|
path: '/wuhanshi',
|
|
component: {
|
|
template: '<div>武汉市</div>'
|
|
}
|
|
}, {
|
|
path: '/hongshanqu',
|
|
component: {
|
|
template: '<div>洪山区</div> '
|
|
}
|
|
}, {
|
|
path: '/hanyangqu',
|
|
component: {
|
|
template: '<div>汉阳区</div>'
|
|
}
|
|
}, {
|
|
path: '/wuchangqu',
|
|
component: {
|
|
template: '<div>武昌区</div>'
|
|
}
|
|
}, {
|
|
path: '/yichangshi',
|
|
component: {
|
|
template: '<div>宜昌市</div>'
|
|
}
|
|
}, {
|
|
path: '/xiangyangshi',
|
|
component: {
|
|
template: '<div>襄阳市</div>'
|
|
}
|
|
}, {
|
|
path: '/jingzhoushi ',
|
|
component: {
|
|
template: '<div>荆州市</div>'
|
|
}
|
|
}, {
|
|
path: '/hunansheng',
|
|
component: {
|
|
template: '<div>湖南省</div>'
|
|
}
|
|
}, {
|
|
path: '/changshashi',
|
|
component: {
|
|
template: '<div>长沙市</div>'
|
|
}
|
|
}, {
|
|
path: '/yongzhoushi',
|
|
component: {
|
|
template: '<div>永州市</div>'
|
|
}
|
|
}, {
|
|
path: '/huaihuashi',
|
|
component: {
|
|
template: '<div>怀化市</div>'
|
|
}
|
|
}, {
|
|
path: '/hengyangshi',
|
|
component: {
|
|
template: '<div>衡阳市</div>'
|
|
}
|
|
}]
|
|
})
|
|
//创建菜单组件
|
|
const MenuComponent = {
|
|
name: 'MenuComponent',
|
|
template: '#menu-component',
|
|
props: ['menus']
|
|
}
|
|
let vm = new Vue({
|
|
el: '#root',
|
|
router,
|
|
components: {
|
|
MenuComponent
|
|
},
|
|
data: {
|
|
menus: [{
|
|
name: '甘肃省',
|
|
path: 'gansu',
|
|
children: [{
|
|
name: '兰州市',
|
|
path: 'lanzhou',
|
|
children: [{
|
|
name: '城关区',
|
|
path: 'chengguanqu'
|
|
}, {
|
|
name: '安宁区',
|
|
path: 'anningqu',
|
|
}, {
|
|
name: '七里河区',
|
|
path: 'qilihequ'
|
|
}]
|
|
}, {
|
|
name: '武威市',
|
|
path: 'wuweishi',
|
|
children: [{
|
|
name: '凉州区',
|
|
path: 'liangzhouqu'
|
|
}, {
|
|
name: '民勤县',
|
|
path: 'minqinxian'
|
|
}, {
|
|
name: '古浪县',
|
|
path: 'gulangxian'
|
|
}]
|
|
}, {
|
|
name: '天水市',
|
|
path: 'tianshuishi'
|
|
}, {
|
|
name: '庆阳市',
|
|
path: 'qingyangshi'
|
|
}]
|
|
}, {
|
|
name: '陕西省',
|
|
path: 'shanxisheng',
|
|
children: [{
|
|
name: '西安市',
|
|
path: 'xianshi'
|
|
}, {
|
|
name: '榆林市',
|
|
path: 'yulinshi'
|
|
}, {
|
|
name: '延安市',
|
|
path: 'yananshi'
|
|
}, {
|
|
name: '咸阳市',
|
|
path: 'xianyangshi'
|
|
}]
|
|
}, {
|
|
name: '湖北省',
|
|
path: 'hubeisheng',
|
|
children: [{
|
|
name: '武汉市',
|
|
path: 'wuhanshi',
|
|
children: [{
|
|
name: '洪山区',
|
|
path: 'hongshanqu',
|
|
hidden: true
|
|
}, {
|
|
name: '汉阳区',
|
|
path: 'hanyangqu',
|
|
hidden: true
|
|
}, {
|
|
name: '武昌区',
|
|
path: 'wuchangqu',
|
|
hidden: true
|
|
}]
|
|
}, {
|
|
name: '宜昌市',
|
|
path: 'yichangshi'
|
|
}, {
|
|
name: '襄阳市',
|
|
path: 'xiangyangshi'
|
|
}, {
|
|
name: '荆州市',
|
|
path: 'jingzhoushi'
|
|
}]
|
|
}, {
|
|
name: '湖南省',
|
|
path: 'hunansheng',
|
|
children: [{
|
|
name: '长沙市',
|
|
path: 'changshashi'
|
|
}, {
|
|
name: '永州市',
|
|
path: 'yongzhoushi'
|
|
}, {
|
|
name: '怀化市',
|
|
path: 'huaihuashi'
|
|
}, {
|
|
name: '衡阳市',
|
|
path: 'hengyangshi'
|
|
}]
|
|
}]
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |