vue2 vue-router3 this.$router.query获取与传递

一、router知识点复习 

1、$router：路由操作对象（只写对象）

2、$route.query是一个key-value对象，若没有参数，则为空对象

二、使用

动态路由传递query参数：{key:value}

 this.$router.push({
        name: 'RoleAuth',
        //path:'/acl/role/auth'
        query: {
          roleName: '经理'
        }
      })

此处this.$router.push可用： path:'/acl/role/auth' ， 做为跳转路由路径也可以像上面一样用name, 前提是name这个值要在路由初始化的时候配置

  {
        name: 'RoleAuth',
        path: 'role/auth/:id',
        // path: 'role/auth',
        component: () => import('@/views/acl/role/roleAuth'),
        meta: {
          activeMenu: '/acl/role/list',
          title: '角色授权',
        },
        hidden: true,
      },

    访问地址：http://localhost:9528/#/acl/roles/auth/roleName=经理

 获取query参数值

获取路由中的参数用法 

vue标签内：

<el-input :value="$route.query.roleName" :disabled="true"></el-input>

或者在script:  this.$route.query

<script>
console.log(this.$route.query.roleName)
<script>

结果：

对应vue-tool显示值：

路由params传递数值与使用

​​​​​​params 跳转中必须使用name不使用path（name需要在路由中配置），区分跟query的区别。

当使用path来设置跳转url时，出错如下：

正确示例：

//设置角色权限
    setPermission(row, index) {
      this.$router.push({
        name: 'RoleAuth',
        query: {
          roleName: '经理'
        },
        params: {
          id: row.id
        }
      })
    },

跳转之后url:
http://localhost:9528/#/acl/roles/auth/1622804551640469505?roleName=经理

获取params值：

this.roleId = this.$route.params.id; 

获取到值是：1622804551640469505