这次给大家带来Vue.js中router如何传递参数,Vue.js中router传递参数的注意事项有哪些,下面就是实战案例,一起来看一下。

Vue-router参数传递

为什么要在router中传递参数

设想一个场景,当前在主页中,你需要点击某一项查看该项的详细信息。那么此时就需要在主页传递该项的id到详情页,详情页通过id获取到详细信息。

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

<template> <p class="work"> work: {{id}} </p> </template> <script> export default { name: 'Work', data () { return { id: this.$route.params.id //拿到id } } } </script>

运行截图:

query传参

将上面的parmas改为query即可,即:

// 传入 this.$router.push({ path: '/work', name: 'Work', query: { id: id } }) ... ... this.$route.query.id // 获取

parmas与query的区别

query是通过url传递参数,始终显示在url中

parmas传参,刷新页面过后就没有数据了,无法将获取到的参数进行保存

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Angular+Font-Awesome步骤详解

js与typescript中class使用详解

以上就是Vue.js中router如何传递参数的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码