Vue 页面传参方式 Query 和 Params_综合

1. query 与 params 传参

query

需要和配合 path 属性使用，携带参数会拼接在请求路径后，效果同 Get 请求方式


http://localhost:8033/Permission/Role/Form?productCode=crm-operate&roleId=1&roleName=admin&roleType=-1&roleDesc=%E7%AE%A1%E7%90%86%E5%91%98

params

需要配合 name 属性使用，参数不会携带在访问路径后，效果同 Post 请求

http://localhost:8033/Permission/Role/Form

2. 代码片演示

从页面NsTableRole 跳转NsFormRole 页面，添加编辑或删除动作都会携带参数到详情页面。

权限管理下角色管理路由配置route.js

// 一级菜单权限管理
const permissionRouter = {path: '/Permission',name: 'Permission',component: () => import('@/views/Default'),redirect: '/Permission/Configuration',meta: {title: '权限管理',requireAuth: true},// 二级菜单:权限配置, 角色管理, 修改密码children: [{path: '/Permission/Role',name: 'PermissionRole',title: '角色管理',component: () => import('@/views/Content'),redirect: '/Permission/Role/Index',children: [{path: '/Permission/Role/Index',name: 'PermissionRoleIndex',component: () => import('@/views/Permission/Role')},{path: '/Permission/Role/Form',name: 'PermissionRoleForm',title: '角色维护',component: () => import('@/views/Permission/Role/NsFormRole')}]}, {path: '/Permission/ModifyPassword',name: 'PermissionModifyPassword',title: '修改密码',component: () => import('@/views/Content'),redirect: '/Permission/ModifyPassword/Index',children: [{path: '/Permission/ModifyPassword/Index',name: 'PermissionModifyPasswordIndex',title: '修改密码',component: () => import('@/views/Permission/ModifyPassword')}]}]
}
export default permissionRouter

2.1 添加角色动作(query 传参)

在页面 NsTableRole 点击添加角色，触发添加角色方法 onAddRole() 携带参数访问 path 属性映射的路由，NsFormRole 页面生命周期函数 created 获取路由携带的参数。传参效果如图

NsTableRole.vue(部分)

 methods: {// 添加角色onAddRole () {this.$router.push({path: '/Permission/Role/Form',query: {productCode: this.model.productCode}})}}

NsFormRole.vue(部分)

  // 生命周期函数 createdcreated () {console.log(this.$route)this.model.productCode = this.$route.query.productCode}

2.2 编辑角色动作(params 传参)

在页面 NsTableRole 点击编辑，触发编辑角色方法 onEditRole() 携带参数访问 name 属性映射的路由，NsFormRole 页面生命周期函数 created 获取路由携带的参数。传参效果如图

NsTableRole.vue(部分)

    // 编辑角色onEditRole (obj) {this.$router.push({name: 'PermissionRoleForm',params: {roleId: obj.roleId,roleName: obj.roleName,roleType: obj.roleType,roleDesc: obj.roleDesc}})}

NsFormRole.vue(部分)

  name: 'NsFormRole',data () {return {model: {roleId: '',roleName: '',roleType: '',roleDesc: '',productCode: '',roleMenuPermission: []}}},created () {console.log(this.$route)this.model.productCode = this.$route.params.productCodethis.model.roleId = this.$route.params.roleIdthis.model.roleDesc = this.$route.params.roleDescthis.model.roleType = this.$route.params.roleTypethis.model.roleName = this.$route.params.roleName},methods () {}

Power By niaonao, The End, Thanks