vue页面开发中需要注意的几点

第一点：router/index.js 文件中路由带有参数的写法

其中：id,代表路由中的参数，当此页面跳转时候，可以获取此参数

   

  {
        path: 'edit/:id',
        name: 'edit',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '教师修改', icon: 'tree' },
        hidden:true
      }

获取参数方式如下：从route中获取此参数

 if (this.$route.params && this.$route.params.id)

 

页面跳转： 进行回显，跳转到查询教师页面,跳转页面方法  this.$router.push({path:"/teacher/save"}) ,path路径为在route中配置的路径

 this.$router.push({path:'/teacher/table'})

路由监听：

   

 watch: {
        // 监听路由发生变化，方法就被调用
        $route(to,from){
            //this.init()
        }
    },

第二点：api文件夹下 以 teacher.js为例 ，请求方法的写法

1: 首先定义一个公用的path路径，在下面方法可以用`${path}` 获取，这个是es6写法

2:参数传递，以下面标绿色为例

3:method: post,get delete ,对应后台的PostMapping,getMapping,deleteMapping

4:参数：以蓝色为例，以rest 风格为例，参数直接拼在url上，data:为对象json, 对应后端的@requestBody 的参数

import request from '@/utils/request'

扫描二维码关注公众号，回复： 12903327 查看本文章

// 定义公用路径
const teacherPath='/eduservice/teacher';
export default{
    // current为当前页 ，limit 是显示页数，teacherQuery 是查询条件
    getTeacherList(current,limit,teacherQuery){
        return request({
            // 这边用的是 ES6的模板字符串写法 ``
            url: `${teacherPath}/pageTeacher/${current}/${limit}`,
            method: 'post',
            // data 表示把对象转为json传到接口里面， 注意格式 data:teacheQuery
            data:teacherQuery
        })
    },
    // 删除教师方法
    delTeacher(id){
        return request({
            // 这边用的是 ES6的模板字符串写法 ``
            url: `${teacherPath}/deleteById/${id}`,
            method: 'delete'
        }) 
    },
    // 添加教师
    addTeacher(teacher){
        return request({
            // 这边用的是 ES6的模板字符串写法 ``
            url: `${teacherPath}/addTeacher`,
            method: 'post',
            data:teacher
        })
    },
    // 根据教师id查询教师
    teacherById(id){
        return request({
            // 这边用的是 ES6的模板字符串写法 ``
            url: `${teacherPath}/findTeacher/${id}`,
            method: 'get',
            // data:teacher
        })
    },
    // 修改教师
    updateTeacher(teacher){
        return request({
            // 这边用的是 ES6的模板字符串写法 ``
            url: `${teacherPath}/updateTeacher`,
            method: 'post',
            data:teacher
        })
    },
}