vue2 vue-router3 this.$router.query获取与传递
一、router知识点1、$router:路由操作对象(只写对象)2、$route.query是一个key-value对象,若没有参数,则为空对象。
·
一、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
更多推荐
已为社区贡献9条内容
所有评论(0)