Vue2.0使用路由进行组件之间传值(三)
重大福利
阿里云服务器优惠 https://www.aliyun.com/1111/home?userCode=n9v6urcn
1、router.push使用
router/index.js
export default new Router({
routes: [
{
path: '/',
name: 'A',
component: require('../components/A')
},
{
path: '/B/:name/:age',
name: 'B',
component: require('../components/B')
}
]
})
上边,在路由中为B组件添加两个参数 name ,age
A组件,绑定一个@click事件,跳转B组件传参 使用params
<template> <div> <div> <p>{{message}}</p> <p @click="toBFun">跳转B组件</p> <!--<router-link :to="{ path: '/B',params:{name:'zs',age:22}}">跳转B组件</router-link>--> </div> </div> </template> <script> export default { data: function () { return { message: '成功!' } }, methods: { toBFun: function(){ this.$router.push({name:'B',params:{name:'wang',age:21}}); } } } </script> <style> </style>
在A组件中,之前参数传递是通过params,
this.$router.push({name:'B',params:{name:'wang',age:2}});
query
this.$router.push({name:'B',query:{name:'wang',age:21}});
以上两种方式页面刷新后,参数还会保留的。