VueCli+SpringBoot（路由、主入口、弹窗、axios请求、数据遍历等）（前端）二

Vue Cli目录

VueCli官网：https://element.eleme.io/#/zh-CN

VueCli写法

:    等于    v-bind

router/index.js

//引入模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Music from '../views/Music.vue'
import Test from '../views/Test.vue'

Vue.use(VueRouter)

//path是路由参数，当路径匹配到当前路由参数时，就会跳转component所对应的页面组件
const routes = [
  {
    path: '/',            //首页
    name: 'Home',
    component: Home
  },
  {
    path: '/about',        //模块路径
    name: 'About',
    component: Aubot
  },
  {
    path: '/music',        //模块路径
    name: 'Music',
    component: Music
  },
  {
    path: '/test',        //模块路径
    name: 'Test',
    component: Test
  }
]

const router = new VueRouter({
  routes
})

export default router

app.vue 为主入口

views/About

功能

1、弹窗

2、加载页面执行方法、打印

3、axios连接接口 get、post、delete请求

4、el-table遍历、 :formatter数据格式化（1、2转化为男、女）、 slot- scope获取当前列的数据信息

5、接口设置好下载样式 重新打开一个页面调用该方法下载

6、分页