方法/步驟
我們先來解決上一次的tab路由切換效果激動class的問題!我們不想讓它點選其它路由連結的時候第一個的路由class處於啟用狀態.首先我們修改下min.js裡面的路由配置檔案.加上首頁路由元件配置.紅色圈的地方意思是,預設進來顯示的路由路徑,還有一個就是直接配置預設的路由路徑,其實指向的都是同一個元件.
第二步,將導航的路由改動下.這裡要注意的是,第一個router-link to不在是直接指向"/"了,而是"/home".然後我們在第一個路由內容的DIV上加一個動態class.用來判斷當前的路由路徑.寫一個三元表示式.$route是一個路由物件,所有的路由都被存在這個物件當中.我們只需要進行判斷當前路由是否指向home這個元件.如果是的話加上一個router-link-active如果不是的話就為空class.效果見第二張,第三張圖片.
此時一個完整的路由切換效果就完成了.接下來就分享下巢狀路由是怎麼弄的!首先找到min.js路由 配置檔案.比如我們在home元件里加一個巢狀路由chi元件.首先要先建立這個chi元件,然後引入到min.js檔案中.然後在home路由的裡面加上children這個方法.這樣,一個巢狀的子路由就配置好了.
方法/步驟
我們先來解決上一次的tab路由切換效果激動class的問題!我們不想讓它點選其它路由連結的時候第一個的路由class處於啟用狀態.首先我們修改下min.js裡面的路由配置檔案.加上首頁路由元件配置.紅色圈的地方意思是,預設進來顯示的路由路徑,還有一個就是直接配置預設的路由路徑,其實指向的都是同一個元件.
第二步,將導航的路由改動下.這裡要注意的是,第一個router-link to不在是直接指向"/"了,而是"/home".然後我們在第一個路由內容的DIV上加一個動態class.用來判斷當前的路由路徑.寫一個三元表示式.$route是一個路由物件,所有的路由都被存在這個物件當中.我們只需要進行判斷當前路由是否指向home這個元件.如果是的話加上一個router-link-active如果不是的話就為空class.效果見第二張,第三張圖片.
此時一個完整的路由切換效果就完成了.接下來就分享下巢狀路由是怎麼弄的!首先找到min.js路由 配置檔案.比如我們在home元件里加一個巢狀路由chi元件.首先要先建立這個chi元件,然後引入到min.js檔案中.然後在home路由的裡面加上children這個方法.這樣,一個巢狀的子路由就配置好了.