Vue08:ElementUI之动态树+数据表格+分页

本节学习目标：

1、实现左侧菜单动态加载

2、点击书籍管理，实现书籍数据加载

一、左侧菜单动态加载

1.禁用Mock.js（main.js中）

//开发环境下才会引入mockjs
// process.env.MOCK && require('@/mock')

2.Login.vue的简单更新

this.axios.post(url, params).then(response => {
            console.log(response);
            if (response.data.success) {
                this.$message({
                    message: response.data.msg,
                    type: 'success'
                }),
                // 跳转路由
                this.$router.push({path:'/AppMain'})
            } else {
                this.$message({
                    message: response.data.msg,
                    type: 'error'
                })
            }

3.LeftNav.vue 

3.1一级菜单

 

解决方案：

3.2二级菜单

          
      
              
              {{m2.text}}
      
    

 

 

3.3 vue+element的el-menu组件实现路由跳转及当前项的设置

二、书籍数据动态加载

1.修改api/action.js的内容

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	'SERVER': 'http://localhost:8080/ssm', //服务器
	'SYSTEM_USER_DOLOGIN': '/user/userLogin', //用户登陆
  'SYSTEM_MENU': '/module/queryRootNode', //系统菜单
  'BOOK_LIST': '/book/queryBookPager', //数据查询
	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
		return this.SERVER + this[k];
	}
}

2.修改LeftNav.vue的内容

3. 在views中新建book目录

3.1新建BookList.vue和AddBook.vue

BookList.vue

AddBook.vue

3.2修改路由 （router/index.js)

#添加
import BookList from '@/views/book/BookList'
import AddBook from '@/views/book/AddBook'

#在appMain的children中添加
{
    path: '/book/BookList',
	name: 'BookList',
	component: BookList
}, {
    path: '/book/AddBook',
	name: 'AddBook',
	component: AddBook
},

3.3 修改AppMain中的内容

#原来的Main替换成 

4.书籍管理数据表格

4.1修改BookList.vue中的内容