不想分析可以直接看解決方案
問題描述:
通過router的route-link可以實現導航欄的功能，並且可以跳轉到相應頁面
但是刷新頁面導航欄沒有定位到當前頁面一欄.
問題分析:
定位導航欄步驟
1. 點擊導航欄對當前一欄添加class
<a @click="toPath(item.note)"
:class="{ 'active': item.note === data.currentPath }">
{{item.name }}
</a>
在toPath中對data中的currentpath進行設置
toPath () {
this.data.currentPath = '我的筆記'
}
2. 對class添加樣式用以突出
但是
添加的class在刷新頁面的情況下會消失
所以不管怎么去做，你需要確保一個變量在刷新頁面的情況下該變量一直不變
可以存cookie，localStorage等等
如果不想麻煩, vue已幫你處理好
解決方案:
vue自帶有對URL定位導航欄的功能，刷新頁面，會自動判斷是哪個vue-link頁面, 並在對應的vue-link的class添加router-link-exact-active
而你所需要做的就是對class為router-link-exact-active進行添加樣式從而突出當前一欄