首先先介绍路由跳转的方法
1、router-link
<router-link to="/path"></router-link>
2、$router方式(js跳转)
this.$router.push({
path:'/path', //路径
name:'pathName' //配置路由时的name
})
以上就是两种路由跳转的方法
跳转时传参的方法
先说说params和query的不同之处
1.query所传的参数会显示在url上,params则不会
2.params传递的参数在浏览器刷新时会清空,query则不会
1、params
router-link:
<router-link :to="{name:'pathName',params:{title:'title',info:'info'}}"></router-link>
注意!这里的to前面是有:冒号的
$router方式:
this.$router.push({
path:'/path', //路径
name:'pathName', //配置路由时的name
params:{
title:'title',
info:'info'
}
})
2、query
router-link:
<router-link :to="{path:'/path',query:{title:'title',info:'info'}}"></router-link>
注意!这里的to前面是有:冒号的
$router方式:
this.$router.push({
path:'/path', //路径
name:'pathName', //配置路由时的name
query:{
title:'title',
info:'info'
}
})
想要了解Vue组件通信,可以看我另一篇文章→ Vue组件通信