主要标签
-
el-contaioner:构建整个页面框架
-
el-aside:构建左侧菜单
-
el-menu:左侧菜单内容,常用属性:
:default-openeds:”[’1‘,‘3’]“默认展开的菜单,通过菜单的index值来关联;
:default-active:默认选中的菜单,通过index来关联; -
el-submenu:可展开的菜单,常用属性:
index:菜单的而下表,必须是文本类型, -
template:设置el-submenu的菜单名
i标签:设置菜单图标,通过class属性实现; -
el-menu-item 子菜单,即展开之后的二级菜单
Vue router来动态构建左侧菜单----用于解决不同用户权限不同的问题
实现点击不同的页面,右侧内容跳转到不同的页面
- 导航一
页面1
页面2 - 导航二
页面3
页面4
注意所有的页面都会被加载到App.vue中,然后在显示
设计思路:
步骤1:分别创建index.vue和四个页面
步骤2:在index.js中配置四个页面对应的路由,
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Book from '@/components/Book'
import Index from '@/components/Index'
import List from '@/components/List'
import SubList from '@/components/SubList'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: '导航一',
// redirect: '/list',当进去直接默认为到list页面下
component: Index,
children: [
{ path: '/list',
name: '页面一',
component: List
},
{ path: '/subList',
name: '页面二',
component: SubList
}
]
},
{
path: '/',
name: '导航二',
component: Index,
children: [
{ path: '/list',
name: '页面三',
component: List
},
{ path: '/subList',
name: '页面四',
component: SubList
}
]
}
]
})
步骤3:在APP.vue中通过<router-view>
来加入index.vue;
<template>
<div id="app">
<router-view/>
</div>
</template>
步骤4:Index.vue实现,并通过<router-view>
在<el-main>
中引入所对应的页面内容,
<template>
<el-contioner style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :router="true" :default-openeds="['0', '1']">
<el-submenu v-for="(item,index) in $router.options.routes" :key="index" :index="index+''">
<template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
<el-menu-item :key="index2" v-for="(item2,index2) in item.children" :index="item2.path">{{item2.path}}
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-contioner>
</template>
<script>
export default {
name: 'Index.vue'
}
</script>
<style scoped>
</style>
注意的点:
- 在
<el-menu>
标签中添加router属性,才是实现跳转的关键步骤,否则就算index指向路由了,也不会实现跳转 - 在
<el-main>
中通过<router-view>
标签引入要展示的子页面,这是一个容器,可以动态渲染我们想要的东西; - 实现
<el-menu-item>
与右侧内容联动,可通过index属性来实现,index指向要跳转的路径,
$router.options.routers
表示index.js中的routes
前端后端实现分页展示
created()表示页面加载之前实现的方法,
this.$axios.post('http://localhost:8081/insertBook', form).then(function (resp)
表示将整个form表单传给后端
实现数据添加功能
后端设计:
前端设计:
AddBook.vue页面设计
<template>
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="书名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="form.author"></el-input>
</el-form-item>
<el-form-item label="出版社" prop="publish">
<el-input v-model="form.publish"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit(form)">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'AddBook',
data () {
return {
form: {
name: '',
author: '',
publish: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
author: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
]
}
}
},
methods: {
onSubmit (form) {
const _this = this
this.$refs.form.validate((valid) => {
if (valid) {
alert('submit!')
this.$axios.post('http://localhost:8081/insertBook', form).then(function (resp) {
console.log(resp)
if (resp.data === 1) {
// 设置路由跳转
_this.$router.push('/List')
} else {
return false
}
})
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
<style scoped>
</style>
注意事项:
- :model=“form” 表示该表名为form,通过v-model="form.name"实现属性绑定
form: {
name: '',
author: '',
publish: ''
}
- ref="form"表示校验绑定,其中所提交的form通过@click="onSubmit(form)提交给后端
onSubmit (form) {
const _this = this
this.$refs.form.validate((valid) => {
if (valid) {
alert('submit!')
this.$axios.post('http://localhost:8081/insertBook', form).then(function (resp) {
console.log(resp)
if (resp.data === 1) {//resp.data为后端返给前端的数据
// 设置路由跳转
_this.$router.push('/List')
} else {
return false
}
})
} else {
console.log('error submit!!')
return false
}
})
}
}
- :rules="rules"表示数据校验,通过rules来设计各属性的要求
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
author: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
]
}
- 实现数据跳转
无参路由跳转
_this.$router.push('/List')
有参路由跳转
_this.$router.push({
path:'/update',
query:{
id:row.id
})
接收参数
this.$route.query.id