实例讲解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>

  <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 // 获取



parmas与query的区别



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



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



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