vue巢狀路由之間的通訊(非vuex方法實現)

2022-06-15 07:12:15 字數 597 閱讀 5935

1.先在main.js裡生成乙個自定義事件

2.這是我路由設定的巢狀路由

3.用法:

父路由接收子路由用自定義事件 

子路由裡的事件繫結 :

this.$root.myevent.$emit("trans", value);   //myevent是main.js裡設定的空的vue例項名

父路由監聽:

that.$root.myevent.$on("trans", function(msg) );

4.現在直接上兩個頁面的**

父路由:

我是父元件的內容

父路由設定的值}

減乙個數

我是從子路由裡哪來的值}

子路由**:

我是子路由的內容

}加乙個數

我是從父路由裡拿過來的值 }

**:

Vue巢狀路由

src components index page index2 router index.js main.js html部分 2級頁面在此顯示 import vue from vue import router from router 引入router.js import vuex from vu...

vue 巢狀路由

在乙個頁面中如果想實現三個頁面的拼接組成乙個頁面,這時候就用到巢狀路由了。第一種方法 1.頂部頁面 views home.vue class drophead 個人資訊 退出2.左側欄頁面 view menusecond.vue 3.右側欄頁面 view menuthird.vue 需簽約檢視 路由...

vue巢狀路由

在實際專案中我們會碰到多層巢狀的元件組合而成,但是我們如何實現巢狀路由呢?因此我們需要在 vuerouter 的引數中使用 children 配置,這樣就可以很好的實現路由巢狀。index.html,只有乙個路由出口 1 div id 23 router view router view 4div ...