本例主要采用vue-cli配合webpack來創(chuàng)建項目秽晚，采用了VueRouter，引入axios庫調用后端API，渲染數(shù)據(jù)井誉，實現(xiàn)了增刪改查功能

1.命令行先進入某個目錄如D:\VueStudy
2.創(chuàng)建項目: vue init webpack vue-router-demo
3.進入vue-router-demo目錄安裝依賴：npm install
4.修改config目錄下index.js的dev端口為80
5.運行：npm run dev，打開http://localhost整胃，看到Vue主頁logo即成功
6.ctrl+c退出批處理狀態(tài)
7.在package.json的依賴文件颗圣，加入axios依賴

"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "axios": "^0.18.0"
  }

8.安裝axios，在命令行：npm install
9.項目的src目錄的main.js文件引入axios

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$http = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

10.components目錄中創(chuàng)建一些vue組件屁使，如圖

組件

11.配置路由在岂，router目錄的index.js文件

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    // 去除#的hash模式
    mode: "history",
    routes: [
        {
            //我的班課
            path: '/',
            name: 'Index',
            component: resolve => require(['../components/Index.vue'], resolve)
        },
        {
            //任務中心
            path: '/task',
            name: 'Task',
            component: resolve => require(['../components/Task.vue'], resolve)
        },
        {
            //庫管理
            path: '/lib',
            name: 'Lib',
            component: resolve => require(['../components/Lib.vue'], resolve)
        },
        {
            //個人中心
            path: '/ucenter',
            name: 'UCenter',
            component: resolve => require(['../components/UCenter.vue'], resolve)
        },
        {
            //新建班課
            path: '/new_course',
            name: 'NewCourse',
            component: resolve => require(['../components/NewCourse.vue'], resolve)
        },
        {
            //班課詳情
            path: '/course/:id',
            name: 'CourseDetail',
            component: resolve => require(['../components/CourseDetail.vue'], resolve)
        }
    ]
})

12.路由跳轉例子：
無參跳轉

<router-link to="/">
    <img src="./assets/logo.png" class="logo"/>
</router-link>
<router-link to="/task" class="nav-item">任務中心</router-link>

路徑傳參跳轉：

<router-link :to="'/course/' + course.courseId">
    <img :src="course.cover" />
</router-link>

js跳轉：

_this.$router.push('/');

13.GET請求示例

var _this = this;
        this.$http.get('http://localhost:8080/api/courses').then(function(response) {
            _this.courses = response.data;
});

<script>
export default {
    name: 'CourseDetail',
    data() {
        return {
            id: this.$route.params.id,
            course: {}
        };
    },
    created() {
        var _this = this;
        this.$http.get('http://localhost:8080/api/course/' + this.id).then(function(response) {
            _this.course = response.data;
        });
    }
};
</script>

14.POST請求示例

<script>
export default {
    name: 'NewCourse',
    data() {
        return {
            loginUserId: 1,
            course: {
                courseName: '',
                courseClass: '',
                cover: ''
            }
        };
    },
    methods: {
        addCourse: function(course) {
            var _this = this;
            this.$http({
                method: 'post',
                url: 'http://localhost:8080/api/course',
                data: {
                    userId: _this.loginUserId,
                    courseName: course.courseName,
                    courseClass: course.courseClass,
                    cover: course.cover,
                    finished: 0
                }
            }).then(function() {
                alert('新增班課成功');
                _this.$router.push('/');
            });
        }
    }
};
</script>

15.DELETE請求示例

deleteCourse: function(courseId,index) {
            var _this = this;
            this.$http({
                method: 'delete',
                url: 'http://localhost:8080/api/course/' + courseId
            }).then(function() {
                alert('班課刪除成功');
                 _this.courses.splice(index,1);
            });
        }

16.完整項目地址:https://github.com/mqxu/demo