这次给大家带来如何使用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传参，刷新页面过后就没有数据了，无法将获取到的参数进行保存
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样使用angular打开font-awesome
怎样使用js与typescript
以上就是如何使用vue.js中router传参的详细内容。