vue路由跳转传递参数,query和params方式传递
vue路由跳转( router-link的to属性,或者this.$router.push()方法 ) 传递参数有两种方式:query和params。一、query传参:1.可以传递多个参数: 域名/list?name=aaa&pass=bbb2.不需要另外配置路由二、params传参:1.只能传递一个参数: 域名/list/32.需要配置路由 代码实现...
·
vue路由跳转( router-link的to属性,或者this.$router.push()方法 ) 传递参数有两种方式:query和params。
一、query传参:
1.可以传递多个参数: 域名/list?name=aaa&pass=bbb
2.不需要另外配置路由
二、params传参:
1.只能传递一个参数: 域名/list/3
2.需要配置路由
代码实现:
一、query方式:
1.配置跳转路径:
方法一:router-link的to属性:
<router-link :to="{name:'/home',query:{username:'zhangsan',password:'123456'}}"></router-link>
方法二:this.$router.push()方法:
this.$router.push({
path:'/home',
query:{
username:'zhangsan',
password:'123456'
}
})
2.跳转后的组件接收参数:(可以在mounted函数中获取)
const n = this.$route.query.username
const p = this.$route.query.password
二、params方式:
1.配置跳转路径:
方法一:router-link的to属性:
<router-link :to="'/home'+goods_id"></router-link>
<!-- goods_id是data中的一个变量 -->
方法二:this.$router.push()方法:
this.$router.push('/home/'+goods_id)
2.配置路由规则:
{path:'/home/:id',component:Home} //id是自定义的一个变量,用于后面接收参数
3.跳转后的组件接收参数:(可以在mounted函数中获取)
const id = this.$route.params.id
附:vue路由官网
更多推荐
已为社区贡献28条内容
所有评论(0)