vue-router中query和params区别

vue-router中query和params传参区别

$router 和 $route

• $router: router-实例属性 和 router-实例方法， 路由跳转的处理。

• $route: 路由对象属性， 当前路由的属性/参数。

  打印 $route 有一以下属性：

  {
      fullPath: "/foo"
      hash: ""
      matched: [{…}]
      meta: {}
      name: "foo"
      params: {id: "2"}
      path: "/foo"
      query: {}
  }
  

query传参

query传参，参数会显示在地址栏（类似于 get 请求）

// 浏览器显示路由地址 /foo?id=2

<!-- 下列5中写法等同 -->
<router-link to="/foo?id=2">Go to foo1</router-link>
<router-link :to="{path: '/foo', query: {id: 2}}">Go to foo2</router-link>
<router-link :to="{name: 'foo', query: {id: 2}}">Go to foo3</router-link>
<button @click="toFoo4">to foo4</button>
<button @click="toFoo5">to foo5</button>
<script>
    methods: {
 		toFoo4 () {this.$router.push({path: '/foo', query: { id: '2' }})} 
   		toFoo5 () {this.$router.push({name: 'foo',query: {id: '2'}
    }
</script>

params传参

params传参，push()里面只能是 name: ‘xxx’，地址栏不显示参数（类似于 post 请求）

<router-link :to="{name: 'bar', params: { name: '2'}}">Go to bar</router-link>
<!-- path 时 获取参数失败为空 -->
<router-link :to="{path: '/bar', params: { name: '2'}}">Go to bar1</router-link>
<button @click="toBar">to bar2</button>
<script>
methods: {
    toBar () {this.$router.push({name: 'bar',params: {name: '2'}})}
    // 当push中使用 path 时，参数获取都为空
    toBar1 () {this.$router.push({path: '/bar',params: {name: '2'}})},
}
</script>