Vue路由傳參及props解耦深入分析

Posted on by

關於路由傳參的幾種方式，眾說紛紜。今天來總結下路由傳參的幾種方式與路由解耦：

一、路由傳參

路由傳參總的來說有兩種方式，query和params，配合聲明式導航與編程式導航，各有不同的幾種寫法；

query傳參

query配合聲明式導航

//路由配置
 {
    path: '/a01',
    name: 'a01',
    component: a01
  }

//傳參方式1--通過url拼接，使用?分割
 <router-link to="/a01?data=a01">a01</router-link>
 //傳參方式2--傳入對象
<router-link :to="{ path: '/a01', query: { data: 'a01' } }">a02</router-link>

query配合編程式導航

路由配置方式不變；

//綁定事件
<span @click="btn('/a01', 'a01')">b01</span>
//處理路由方式1，通過path配合query
 btn(path, data) {
      this.$router.push({
        path,
        query: {
          data,
        },
      });
    },
 //處理路由方式2，通過name配合query
    btn1(name, data) {
      this.$router.push({
        name,
        query: {
          data,
        },
      });
    },

query傳參的特點

1.參數在url中展現，使用？分割。屬性和值以鍵值對形式存在

2.子組件通過$route.query.xxx方式獲取參數（xxx為自己定義的參數名）

params傳參

params傳參分為兩種情況，路徑占位與不占位

路徑使用參數占位時

params配合聲明式導航：

//路由聲明需要使用‘：'占位
{
    path: '/a02/:data',
    name: 'a02',
    component: a02
  }

//傳參方式1--url拼接，不需要？分割
<router-link to="/a02/a02">a02</router-link>
//傳參方式2--傳對象
<router-link :to="{ path: '/a02/a02' }">a02.1</router-link>

params配合編程式導航：

  btn1(name, data) {
      this.$router.push({
        name,
        params: {
          data,
        },
      });
    },

params傳參配合路徑占位的特點：

1.參數在url中展現，沒有？=等額外標簽

2.子組件以$route.params.xxx方式獲取參數（xxx為自己定義的參數名）

路徑不使用占位時

聲明式導航

<router-link :to="{ name:'a02',params:{data:'a02'} }">a02.1</router-link>

註意！！需要使用name，不可以使用path，官網解釋如下：

註意：如果提供瞭 path，params 會被忽略，你需要提供路由的 name 或手寫完整的帶有參數的 path

編程式導航

//路由配置
{
    path: '/a03',
    name: 'a03',
    component: a03
  }
  //路由跳轉
 <span @click="btn3('a03', 'a03')">b04</span>
 btn3(name, data) {
      this.$router.push({
        name,
        params: {
          data,
        },
      });
    },

params傳參占位的特點：

1.參數在不在url體現

2.刷新後數據丟失

二、props解耦

vue的組件是可以復用的，但是路由給子組件傳值後，通過$route獲取參數會導致子組件無法復用，解決這個問題，需要用到props解耦；

1.props佈爾值

具體使用：

1.在路由配置時使用props

{
    path: '/a02/:data',
    name: 'a02',
    component: a02,
    //使用props傳參
    props: true
  }

2.父組件傳參，沒有變化

3.子組件使用props接收

<template>
  <p>{{ data }}</p>
</template>
<script>
export default {
  props: {
    data: {
      type: String,
    },
  },
};
</script>

props為佈爾值 true 開啟props接收，false關閉。

上例我們演示的就是這樣的情況，但是，props為佈爾值時，隻適用於params傳參，對query不適用；

2.props函數模式

props配置為函數，可以獲取query方式的傳值，通過route.query.xxx方式

//配置
 {
    path: '/a01',
    name: 'a01',
    component: a01,
    props: (route) => ({ data: route.query.data })
  }
//傳參--與query一致
<router-link to="/a01?data=a01">a01</router-link>
//接收
<template>
  <p>{{ data }}</p>
</template>
<script>
export default {
  props: {
    data: {
      type: String,
    },
  },
};
</script>

3.props對象模式

props對象模式直接傳遞固定值，不需要再傳參；

//配置
 {
    path: '/a01',
    name: 'a01',
    component: a01,
    props: {data:'123'}
  }

以上，為本次分享全部內容，如有錯誤，歡迎隨時私信指正，不勝感激。

到此這篇關於Vue路由傳參及props解耦深入分析的文章就介紹到這瞭,更多相關Vue路由傳參內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：