1.params传值--需要用name属性,路由中必须配置name
router.js:
import Main from './views/main.vue'
import Main2 from './views/main2.vue'
export default new Router({
// mode: 'abstract',
routes: [{
path: '/main',
component: Main,
},
{
path: '/',
redirect: '/main'
}
,
{ //单纯只配置path是无法使用params方式传值的,
//必须配置name属性才行
name:'main2',
path:'/main2',
component:Main2
}
]
})
传值组件:
methods: {
jump(to) {
//这里必须是$router
this.$router.push({
name:to,//这里必须使用name属性,使用path则只会跳转无法传值
params:{
mon:this.money
}
})
}
}
接收组件:
created() {
this.money=this.$route.params.mon
//使用params传值,这里也必须是params,同时这里是$route,不是$router
alert(this.money)
}
2.query传值--需要使用path属性,路由中必须配置path
router.js:
import Main from './views/main.vue'
import Main2 from './views/main2.vue'
export default new Router({
// mode: 'abstract',
routes: [{
path: '/main',
component: Main,
},
{
path: '/',
redirect: '/main'
}
,
{ //单纯只配置path只能使用query方式传值
//name:'main2',
path:'/main2',
component:Main2
}
]
})
传值组件:
methods: {
jump(to) {
//这里必须是$router
this.$router.push({
path:to,//这里必须使用path属性
query:{
mon:this.money
}
})
}
}
接收组件:
created() {
this.money=this.$route.query.mon//使用query传值,这里也必须是query,同时这里是$route,不是$router
alert(this.money)
}
vue路由传值,详细套路
最新推荐文章于 2022-09-17 20:15:34 发布