关于vue中带参数的页面之间跳转
客套话不多说,直接进入主题以我现在的知识,我认为vue中页面之间的跳转都是通过路由router来跳转,即:this.$router.push({path: '你要跳转的路由路径'})在跳转中如果传递参数时有两种方法(1)this.$router.push({path:'你要跳转的路由路径',query:{paramName:paramValue}})跳转过去用接收...
·
客套话不多说,直接进入主题
以我现在的知识,我认为vue中页面之间的跳转都是通过路由router来跳转,即:
this.$router.push({path: '你要跳转的路由路径'})
在跳转中如果传递参数时有两种方法
(1)
this.$router.push({path:'你要跳转的路由路径',query:{paramName:paramValue}})
跳转过去用接收
this.$route.query.paramName
(2)
this.$router.push({name:'你要跳转的路由name',params:{paramName:paramValue})
跳转过去用接收
this.$route.params.paramName
第一种传递有一种缺点就是你所传的参数会跟到url地址栏的后面,跟get请求还有点相似
第二种就不会有这种状况
这里给出案例
路由(router):
{
path: '/addRole',
redirect: '/add/addRole',
component: Layout,
hidden: true,
children: [{
name: 'addRole',//新增角色
path: '/add/addRole',
component: () => import('@/views/role/addRole'),
meta: {title: '新增角色',}
}]
}
在该页面跳转,跳转的方法:
addRow(row) {
this.$router.push({name: 'addRole', params: {row: row, title: '编辑角色'}})
//this.$router.push({path: '/addRole', query: {row: row, title: '编辑角色'}})
}
接收页面接收的方法,这里我写到了创建方法中,页面跳过来就一定会执行该方法:
created: function () {
console.log(this.$route.params)
// console.log(this.$route.query)
}
over
更多推荐
已为社区贡献2条内容
所有评论(0)