query与params参数传递的区别

1.query传参分为编程式和声明式

声明式router-link：该方式是通过 router-link 组件的 to 属性实现 ，编程式 this.$router.push：使用该方式传值的时候，是在函数中实现，二者都可以用name传参。 

<template>
  <div>
    <div class="page-header"><h2>Vue Router Demo</h2></div>
     <div @click="dianji">About</div>
    <router-link
      :to="{
        path: '/Home',
        query: {
          queryId: '20180833',
          queryName: 'query',
        },
      }">Home
    </router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Banner",
  methods:{
    dianji(){
       this.$router.push({
       path:'/About',
        query:{ queryId:'20180822', queryName:'query'
         } })
    }
  }
};

 
</script>

<style>
</style>

         二者都是使用$route.query.queryId来接收

<template>
  <ul>
      <li>消息编号：{{$route.query.queryId}}</li>
       <li>消息标题：{{$route.query.queryName}}</li>
  </ul>
</template>

<script>
export default {
name:'Detail',
}
</script>

2.params参数传递

     由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。

    它也可以<router-link :to=""></router-link>传参，如下

<template>
  <div>
    <div class="page-header"><h2>Vue Router Demo</h2></div>
    <div @click="dianji">About</div>
    <router-link :to="{ name: 'home', params: { id: 3 } }"> Home</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Banner",
  methods: {
    dianji() {
      this.$router.push({
        name: "about",
        params: {
          id: 1,
        },
      });
    },
  },
};
</script>

<style>
</style>

       其中，params可分为在 url 中显示参数和不显示参数两种方式，子路由需提前配置好参数。如果不带参数，会直接跳到界面。

 <router-link :to="{ path: '/Home/3' }"> Home</router-link>

{
    path: '/Home/:id',
    component: Home
}

 <li>消息编号：{{this.$route.params.id}}</li>

    效果图如下