初學(xué)vue問題記錄
問題一、vue-router使用過程遇到的登錄頁空白問題
之前用vue-cli創(chuàng)建了一個vue項(xiàng)目，默認(rèn)使用vue-router，目錄結(jié)構(gòu)中自帶了router目錄，里面有index.js
但是當(dāng)我又創(chuàng)建一個項(xiàng)目的時候默認(rèn)沒有使用vue-router時，后面我使用npm install vue-router安裝了插件之后項(xiàng)目中沒有自動創(chuàng)建router目錄。查找資料顯示說這種方式不會創(chuàng)建router目錄，自己就把前面創(chuàng)建的項(xiàng)目的router目錄及里面的文件拷貝過來使用。
使用的過程中，新建立的項(xiàng)目我自己單獨(dú)寫了一個Login.vue，想把這個登錄頁面作為首頁，使用vue-router配置。我就修改了router目錄的index.js。如下：
main.js中引入router.js。如下：
到這里就是我找到的資料要配置登錄頁的，加上我不使用router-link，我就沒有修改App.vue。我以為都配置完成了，就直接啟動項(xiàng)目，發(fā)現(xiàn)頁面空白。后來才發(fā)現(xiàn)App.vue中沒有使用<router-view></router-view>。在App.vue加入<router-view></router-view>啟動就成功顯示登錄頁面了。
總結(jié)：使用vue-router，
1.需要在router目錄的index.js維護(hù)好路由
2.main.js中引入router下文件
3.App.vue中使用router-view
最后還發(fā)現(xiàn)了一個問題，用 http://localhost:8080/訪問title上的favicon沒有顯示；
用http://172.17.112.40:8080/訪問title上的favicon就能顯示
通過測試發(fā)現(xiàn)，好像是瀏覽器緩存問題，清除瀏覽器緩存又可以正常顯示了。
問題二、使用vue-router過程中，子路由不顯示問題
問題描述，我的項(xiàng)目是一個登錄頁面，項(xiàng)目默認(rèn)顯示登錄頁面；登錄成功后顯示登錄成功后的默認(rèn)頁面，我的默認(rèn)頁面是由header公共導(dǎo)航和內(nèi)容組件組成，這個時候出現(xiàn)了問題，header部分組件顯示正常，但是內(nèi)容組件不顯示。經(jīng)過分析查閱資料是因?yàn)楦嘎酚山M件沒有使用router-view導(dǎo)致的。我的header組件是由兩個組件組成的，就在header組件內(nèi)加上router-view登錄成功后的默認(rèn)頁面就顯示正常了。
HeadLayout.vue中增加router-view，解決子路由不顯示問題
總結(jié)：要使用路由一定要在使用router-view，要在父級組件中使用。
問題三、子路由跳轉(zhuǎn)問題
問題描述：原本MainMenu.vue中使用的是a鏈接，我添加的click方法進(jìn)行路由切換，但是總是失敗，切換后一閃第二個頁面的內(nèi)容，然后又顯示第一個頁面內(nèi)容。寫法如下：
第二個子路由頁面內(nèi)容閃一下
最終顯示第一個子路由頁面內(nèi)容
這個a鏈接click的問題原因出現(xiàn)在href上，我只是清空了里面的內(nèi)容，需要刪除該屬性，或者將值改為href="javascript:;"，
解析參照：https://www.cnblogs.com/fairy62/p/9486979.html
自己換成router-link實(shí)現(xiàn)路由切換，可以正常切換。另外要在router-link上使用click方法切換路由，而不使用to屬性，需要使用native修飾符。@clike.native
但是還有一個問題就是我加了一個樣式，給router-link，想讓激活的link帶背景色。我這種寫法兩個都有這個樣式
.router-link-active {
background: #848484;
}
效果如下：
于是我又棄用click了，直接使用to屬性才沒有問題。
