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>