vue 同页面传参取不到_Vue 页面传参方式 Query 和 Params

拼搏现实的明天。 2022-12-31 10:23 195阅读 0赞

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 页面，添加编辑或删除动作都会携带参数到详情页面。

![Image 1][]

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

// 一级菜单权限管理

const permissionRouter = \{

path: '/Permission',

component: () => import('@/views/Default'),

redirect: '/Permission/Configuration',

meta: \{

title: '权限管理',

requireAuth: true

\},

// 二级菜单:权限配置, 角色管理, 修改密码

children: \[\{

path: '/Permission/Role',

title: '角色管理',

component: () => import('@/views/Content'),

redirect: '/Permission/Role/Index',

children: \[\{

path: '/Permission/Role/Index',

component: () => import('@/views/Permission/Role')

\},

path: '/Permission/Role/Form',

title: '角色维护',

component: () => import('@/views/Permission/Role/NsFormRole')

\}\]

\}, \{

path: '/Permission/ModifyPassword',

title: '修改密码',

component: () => import('@/views/Content'),

redirect: '/Permission/ModifyPassword/Index',

children: \[\{

path: '/Permission/ModifyPassword/Index',

title: '修改密码',

component: () => import('@/views/Permission/ModifyPassword')

\}\]

export default permissionRouter

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

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

![Image 1][]

NsTableRole.vue(部分)

methods: \{

// 添加角色

onAddRole () \{

this.$router.push(\{

path: '/Permission/Role/Form',

query: \{

productCode: this.model.productCode

\})

NsFormRole.vue(部分)

// 生命周期函数 created

created () \{

console.log(this.$route)

this.model.productCode = this.$route.query.productCode

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

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

![Image 1][]

NsTableRole.vue(部分)

// 编辑角色

onEditRole (obj) \{

this.$router.push(\{

params: \{

roleId: obj.roleId,

roleName: obj.roleName,

roleType: obj.roleType,

roleDesc: obj.roleDesc

\})

NsFormRole.vue(部分)

data () \{

return \{

model: \{

roleId: '',

roleName: '',

roleType: '',

roleDesc: '',

productCode: '',

roleMenuPermission: \[\]

\},

created () \{

console.log(this.$route)

this.model.productCode = this.$route.params.productCode

this.model.roleId = this.$route.params.roleId

this.model.roleDesc = this.$route.params.roleDesc

this.model.roleType = this.$route.params.roleType

this.model.roleName = this.$route.params.roleName

\},

methods () \{

Power By niaonao, The End, Thanks

[Image 1]:

vue 同页面传参取不到_Vue 页面传参方式 Query 和 Params

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue页面传参

相关 vue 同页面传参取不到_Vue 页面传参方式 Query 和 Params

相关 Vue---Vue路由传参(动态路由方式、query方式、params方式)

相关 vue路由传参—params—query

相关 vue使用params传参

相关 vue路由query和params的几种传参方式

相关 vue路由传参--------params和query的区别

相关 vue页面跳转传参

相关 vue传参之params传参query传参

相关 vue-router中 query传参和params传参的使用和区别