routejs怎麼動態配置

Ⅰ vue route怎麼直接載入某個路由'

方法/步驟

1
我們先來解決上一次的tab路由切換效果激動class的問題!我們不想讓它點擊其它路由鏈接的時候第一個的路由class處於激活狀態.首先我們修改下min.js裡面的路由配置文件.加上首頁路由組件配置.紅色圈的地方意思是,默認進來顯示的路由路徑,還有一個就是直接配置默認的路由路徑,其實指向的都是同一個組件.

2
第二步,將導航的路由改動下.這里要注意的是,第一個router-link to不在是直接指向"/"了,而是"/home".然後我們在第一個路由內容的DIV上加一個動態class.用來判斷當前的路由路徑.寫一個三元表達式.$route是一個路由對象,所有的路由都被存在這個對象當中.我們只需要進行判斷當前路由是否指向home這個組件.如果是的話加上一個router-link-active如果不是的話就為空class.效果見第二張,第三張圖片.

3
此時一個完整的路由切換效果就完成了.接下來就分享下嵌套路由是怎麼弄的!首先找到min.js路由 配置文件.比如我們在home組件里加一個嵌套路由chi組件.首先要先創建這個chi組件,然後引入到min.js文件中.然後在home路由的裡面加上children這個方法.這樣,一個嵌套的子路由就配置好了.

4
到這里,在home組件中寫一個入口進入這個嵌套的路由組件中去.嵌套路由點擊進去,會進入到之前寫好的chi.vue組件中去.

5
點擊之後,就會顯示.home裡面的chi組件.並且顯示chi組件中的內容

6
最後總結下這個的用法地方在哪裡.吧比如一個首頁中是路由進來的組件,而這個組件中又有一些類似切換tab功能.這時候切換來的也就是嵌套的子路由了.最後在講個小的提示,就是,細心的同學可能發現,上面顯示的chi組件中,下面的導航還在這里.如果說我不希望他出現呢?比如一個實際應用:首頁組件展示新聞列表,點擊新聞列表進入一個詳情頁面.此時如果下面的導航還顯示的話就不太好了.其實點擊新聞列表的時候就相當於上面分享的點擊了子路由進入到一個詳情組件(這里的chi組件).這個關於導航的問題會在下一次經驗中給大家分享.
END
注意事項

主要是判斷路由路徑.
重點children用法.