兩組件間傳值，可能包含多種情況，有父子組件和非父子組件，對(duì)于父子組件網(wǎng)上有很詳細(xì)的方法講解，但非父子組件傳值有用bus總線，還有一些其他方法，其中的使用路由跳轉(zhuǎn)的方法講解太過簡潔，難以理解。因?yàn)槭枪卷?xiàng)目，采用的是公司封裝的UI框架，但基本上還是采用vue框架，ts編寫。所以一些樣式結(jié)構(gòu)可能沒有參考價(jià)值，但我會(huì)講解清楚每一部分作用，主要是路由跳轉(zhuǎn)部分的代碼實(shí)現(xiàn)。

首先，需求如下圖，樹狀列表每一項(xiàng)有一個(gè)編輯按鈕，點(diǎn)擊按鈕之后跳轉(zhuǎn)到另一個(gè)路由頁面，會(huì)將樹狀列表中每一項(xiàng)數(shù)據(jù)帶過來。

vue文件部分：

<tree  :data="dataList"  node-key="id"  default-expand-all  :expand-on-click-node="false">  <span class="custom-tree-node" slot-scope="{ node, data }" :class="$style.list">    <span :class="$style.listText">{{ node.label }}</span>    <span :class="$style.listBtn">      <button        :class="$style.btn"        type="text"        size="mini"        @click="() => edit(data)">      </button>    </span>  </span></tree><router-view></router-view>

這是封裝好的樹狀列表，使用 scoped slot 會(huì)傳入兩個(gè)參數(shù) node 和 data ，分別表示當(dāng)前節(jié)點(diǎn)的 Node 對(duì)象和當(dāng)前節(jié)點(diǎn)的數(shù)據(jù)。當(dāng)點(diǎn)擊button會(huì)路由跳轉(zhuǎn)頁面顯示在 <router-view>中。

那我們先來看一下ts中edit這個(gè)方法是怎么寫的。

edit(info: Idata) {  this.$router.push({    name: `ListEdit`,    query: {      label: info.label,      scene: info.scene,    },  });},

終于看到主角 $router.push ，它會(huì)帶兩個(gè)參數(shù)，name表示即將跳轉(zhuǎn)到的路由名字，還有一個(gè)參數(shù)可以是query，也可以是params，它們的區(qū)別簡單來說，就相當(dāng)于 get 和 post ，query == get ，params == post，query 會(huì)把攜帶的參數(shù)顯示在 url 中。那query中的參數(shù)就是所需要攜帶的參數(shù)，那這一步總體來說就意味著跳轉(zhuǎn)到ListEdit這個(gè)路由頁面，并攜帶label、scene 這兩個(gè)參數(shù)。

至于其中的 info：Idata 這樣的寫法是因?yàn)閠s，ts接口了解一下。

現(xiàn)在編輯按鈕這部分內(nèi)容ok了，它確定了要跳轉(zhuǎn)的地方還有需要攜帶的參數(shù)，那么我們這個(gè)ListEdit路由頁面就應(yīng)該做好準(zhǔn)備接收人家?guī)淼膮?shù)呀。在頁面創(chuàng)建期間和路由發(fā)生改變期間，都會(huì)有一個(gè)傳值的動(dòng)作，那就再created鉤子函數(shù)和監(jiān)聽路由函數(shù)中寫入代碼。

created() {  const {label= "", scene= ""} = this.$route.query;  this.form = {    name: label.toString(),    initScene: scene.toString(),  };},watch: {  $route(to, from) {    if (to.path === "/list/listEdit") {      const {label= "", scene= ""} = to.query;      this.form = {        name: label.toString(),        initScene: scene.toString(),      };    }  },},