码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 页面传参方式 Query 和 Params

时间:2020-01-16 19:26:35      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:const   vue   pat   获取   redirect   type   role   -o   created   

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(部分)
js 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 获取路由携带的参数。传参效果如图
技术图片
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 () {
  }

Power By niaonao, The End, Thanks

Vue 页面传参方式 Query 和 Params

标签:const   vue   pat   获取   redirect   type   role   -o   created   

原文地址:https://www.cnblogs.com/niaonao/p/12202450.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!