当前位置: 首页 > Web前端 > vue.js

Vue页面参数传递方法Query和Params

时间:2023-04-01 01:21:48 vue.js

1.query和params传参查询需要和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%98params需要和name属性一起使用,参数访问路径后不会携带。效果和Post请求http://localhost:8033/Permission/Role/Form2一样。代码片段demo从NsTableRole页面跳转到NsFormRole页面,添加、编辑或删除动作会携带参数到详情页。权限管理下角色管理的路由配置route.js//一级菜单权限管理constpermissionRouter={path:'/Permission',name:'Permission',component:()=>import('@/views/Default'),redirect:'/Permission/Configuration',meta:{title:'权限管理',requireAuth:true},//二级菜单:权限配置、角色管理、修改密码children:[{path:'/Permission/Role',name:'PermissionRole',title:'RoleManagement',component:()=>import('@/views/Content'),redirect:'/Permission/Role/Index',children:[{路径:'/Permission/Role/Index',name:'PermissionRoleIndex',component:()=>import('@/views/Permission/Role')},{path:'/Permission/Role/Form',name:'PermissionRoleForm',title:'RoleMaintenance',component:()=>import('@/views/Permission/Role/NsFormRole')}]},{path:'/Permission/ModifyPassword',name:'PermissionModifyPassword',title:'修改密码',component:()=>import('@/views/Content'),重定向:'/Permission/ModifyPassword/Index',children:[{path:'/Permission/ModifyPassword/Index',name:'PermissionModifyPasswordIndex',title:'ModifyPassword',component:()=>import('@/views/Permission/ModifyPassword')}]}]}exportdefaultpermissionRouter2.1添加角色动作(查询传参)在NsTableRole页面点击添加角色,触发添加角色方法onAddRole()携带参数访问path属性映射的路由,创建的NsFormRole页面生命周期函数获取携带的路由传参效果如NsTableRole.vue(part)methods:{//添加角色onAddRole(){this.$router.push({path:'/Permission/Role/Form',query:{productCode:this.model.productCode}})}}NsFormRole.vue(part)//生命周期函数创建created(){console.log(this.$route)this.model.productCode=this.$route.query.productCode}2.2编辑角色Action(params传参)点击NsTableRole页面的Edit,触发编辑角色方法onEditRole()进行携带y参数访问name属性映射的路由,创建的NsFormRole页面生命周期函数获取路由携带的参数。传参效果如图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:[]}}},创建(){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(){}Powerbyniaonao,完结,谢谢