vue mysql交互_vue前后端交互

路由传参

标签传参方式：

传参方式

router.js

{

path: '/course/detail/:pk',

name: 'course-detail',

component: CourseDetail

}

传递层

详情页

接收层

let id = this.$route.params.pk

演变体

"""

{

path: '/course/:pk/:name/detail',

name: 'course-detail',

component: CourseDetail

}

详情页

let id = this.$route.params.pk

let title = this.$route.params.name

"""

第二种

router.js

{

// 浏览器链接显示：/course/detail，注：课程id是通过数据包方式传递

path: '/course/detail',

name: 'course-detail',

component: CourseDetail

}

传递层

详情页

接收层

let id = this.$route.params.pk

第三种

router.js

{

// 浏览器链接显示：/course/detail?pk=1，注：课程id是通过路由拼接方式传递

path: '/course/detail',

name: 'course-detail',

component: CourseDetail

}

传递层

详情页

接收层

let id = this.$route.query.pk

逻辑传参：this.$router

第一种

"""

路由：

path: '/course/detail/:pk'

跳转：id是存放课程id的变量

this.$router.push(`/course/detail/${id}`)

接收：

let id = this.$route.params.pk

"""

第二种

"""

路由：

path: '/course/detail'

跳转：id是存放课程id的变量

this.$router.push({

'name': 'course-detail',

params: {pk: id}

});

接收：

let id = this.$route.params.pk

"""

第三种

"""

路由：

path: '/course/detail'

跳转：id是存放课程id的变量

this.$router.push({

'name': 'course-detail',

query: {pk: id}

});

接收：

let id = this.$route.query.pk

"""

历史记录跳转

"""

返回历史记录上一页：

this.$router.go(-1)

去向历史记录下两页：

this.$router.go(-2)

"""

路由汇总大案例

router.js

import Vue from 'vue'

import Router from 'vue-router'

import Course from './views/Course'

import CourseDetail from './views/CourseDetail'

Vue.use(Router);

export default new Router({

mode: 'history',

base: process.env.BASE_URL,

routes: [

{

path: '/course',

name: 'course',