脚本宝典收集整理的这篇文章主要介绍了Vue.js 关于router传参那点事儿，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Vue-router参数传递

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

2. 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

     PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" " title="" data-original-title="复制">

     <template>
         <div class="work">
           work: {{id}}
         </div>
       </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 // 获取

3. parmas与query的区别

   • query是通过url传递参数，始终显示在url中
   • parmas传参，刷新页面过后就没有数据了，无法将获取到的参数进行保存

总结： 这两种参数的传递方式，各有各的用途，具体的还要自己亲手试一试才知道，前端这个领域，还是要多多亲自动手实践。

脚本宝典总结

以上是脚本宝典为你收集整理的Vue.js 关于router传参那点事儿全部内容，希望文章能够帮你解决Vue.js 关于router传参那点事儿所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。