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

     <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传参，刷新页面过后就没有数据了，无法将获取到的参数进行保存

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