Vue.js中如何实现router传参
这篇文章主要介绍“Vue.js中如何实现router传参”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue.js中如何实现router传参”文章能帮助大家解决问题。
网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了道外免费建站欢迎大家使用!
vue-router 参数传递的方式
Parma传参
代码:
/router/index.vue
export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/work', name: 'Work', component: Work } ] })
组件Works传递一个work的id到组件Work
/components/Home/Comtent/Works.vue
// 触发它传递一个对象到组件Work getIt (id) { this.$router.push({ path: '/work', name: 'Work', params: { id: id } }) }
/components/Work/Index.vue
work: {{id}}
运行截图:
query传参
将上面的parmas改为query即可,即:
// 传入 this.$router.push({ path: '/work', name: 'Work', query: { id: id } }) ... ... this.$route.query.id // 获取
parmas与query的区别
query是通过url传递参数,始终显示在url中
parmas传参,刷新页面过后就没有数据了,无法将获取到的参数进行保存。
关于“Vue.js中如何实现router传参”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。
分享题目:Vue.js中如何实现router传参
文章路径:http://myzitong.com/article/gsiooc.html