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
从页面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
在页面 NsTableRole 点击添加角色,触发添加角色方法 onAddRole() 携带参数访问 path 属性映射的路由,NsFormRole 页面生命周期函数 created 获取路由携带的参数。传参效果如图
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
}
在页面 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.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 () {
}
在前端开发中,经常会遇到获取URL的相关数据,下面将总结下使用JavaScript来获取url地址的协议,参数,端口号,锚点等方法。
ECMAscript中所有函数的参数都是按值传递,也就是,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。js始终是按值传递,在这里称他为共享传递。
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。URLSearchParams()是个构造函数,将返回一个可以操作查询字符串的对象。
通过访问arguments对象的length属性可以获取有多少个参数传递给了函数。在封装函数的时候,会携带不同的参数,我们想要获取指定的参数,可以通过 arguments[ ] 来拿到,arguments对象可以与命名参数一起使用。arguments的值要永远与对应命名参数的值保持同步
给外部引用的js文件传递参数的4种方式:定义全局变量、在src后面传参、检索js文件(js文件要最后引入)、设置其他属性
一般error函数返回的参数有三个: function(jqXHR jqXHR, String textStatus, String errorThrown)。常见调用代码如下:这里对这三个参数做详细说明。
在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上。如下代码想要达到的效果:不传page和id,则映射到user默认list页面,传page和id,根据page不同,显示不同的页面
函数是一段结合在一起执行特定任务的代码,函数一般使用参数与外部进行交互。要编写简洁高效的JS代码,必须掌握函数参数。在本文中,会使用一些有趣的例子来解释 JS 必须有效地处理函数参数的所有特性。
前后端传参一般有两种形式:key=value 形式传参(即 parameter 形式);body 形式传参(传 json 数据给后端),如果使用的是 GET 请求,浏览器展示的 Request URL 会自动在路径后面加上 ?a=1&b=2这样的参数,这就是 key=value 形式传参
* 参数可以使用逗号或分号分隔。 (建议使用分号,因为逗号具有双重含义:可以将其解释为mixin参数分隔符或者是css列表分隔符);使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!