VUE 路由傳參

vue路由帶參總結

1. params

<router-link :to="{name:'test', params: {id:1}}">
配置路由格式要求: path: "/test/:id"
js參數獲取：this.$route.params.id

---

2.query

<router-link :to="{name:'test', query: {id:1}}">
配置路由:無要求
js參數獲取：this.$route.query.id

---

備註：

router-link是html寫法，JS中語法如下：
this.$router.push({name:'test',query: {id:'1'}})
this.$router.push({name:'test',params: {id:'1'}})

 

新頁面取值

created() {

this.queryParam = {companyToId: this.$route.query.companyToId};

}

watch: {
  '$route.params': {
    immediate: true,
    handler(newVal) {
      this.tabId = newVal.tabId || '0';
      this.queryParam.orderStatus = this.tabId;
    }
  },