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

目录

一、动态树功能实现

1、要确定静态树形菜单节点的样式排版

2、要获取树形节点的数据

LeftNav.vue

 3、通过拿到的数据，渲染树形节点

 4、创建文章管理

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

---

一、动态树功能实现

1、要确定静态树形菜单节点的样式排版

  
      
      
        
        二级菜单
      
    

2、要获取树形节点的数据

LeftNav.vue

 获取数据

 3、通过拿到的数据，渲染树形节点

 4、创建文章管理

Articles.vue

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

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: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },
        {
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        },
        {
          path: '/sys/Articles',
          name: 'Articles',
          component: Articles
        }
      ]
    }
  ]
})

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

 Articles.vue