vue-router2路由传参的几种方式

简单介绍一下vue-router传参的几种,深入学习请移步 vue-router2中文文档

声明式

<router-link :to="{path:'newsDetail/'+id}"><router-link>

<router-link :to="{name:'newsDetail',params:{id:123}}"><router-link>

//也可以使用以下方式:
<router-link v-bind="{to:'/newsDetail/'+id}"><router-link>

编程式

router.push({ name: 'newsDetail', params: { id: 123 }})  ->/newsDetail/123

router.push({ path: 'newsDetail', query: { id: 123 }}) ->newsDetail?id=123
// 注意这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

//别忘了路由里配置
{ path: '/newsDetail/:id', name:'newsDetail',component: newsDetail}
  • 以params的方式在路由之间传递参数,参数可以从this.$route.params中获取,以query的方式在路由之间传递参数,参数可以从this.$route.query中获取。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容