SPA项目开发之动态树+数据表格+分页

SPA项目开发之动态树+数据表格+分页

课程目标

1、动态树功能
2.elementui中的数据表格
3、右侧文章的分页查询功能

动态树功能

Leftav.vue:

2.elementui中的数据表格

先在LeftNav里面加一个路由：

 router :default-active="$route.path"

然后再把LeftNav里面index里的数据改成m2.url：

Articles.vue：

3、右侧文章的分页查询功能

index.js 定义路由：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import Articles from '@/views/sys/Articles'
import Login from '@/views/Login'
import Reg from '@/views/Reg'

Vue.use(Router)

export default new Router({
	/* 定义路由线路 */
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
		{
			path: '/Login',
			name: 'Login',
			component: Login
		},
		{
			path: '/Reg',
			name: 'Reg',
			component: Reg
		},
		{
			path: '/AppMain',
			name: 'AppMain',
			component: AppMain,
			children:[
				{
					path: '/sys/Articles',
					name: 'Articles',
					component: Articles
				},
			]
		}
  ]
})

Article.vue:

结果：