vue2.0項目實現(xiàn)路由跳轉(zhuǎn)的方法詳解
一、安裝
1、安裝路由vue-router:
npm install vue-router
vue項目的依賴文件node_modules存在vue-router依賴,說明安裝成功
2、vue項目引入vue-ruoter:
二、應用
1、路徑配置(頁面跳轉(zhuǎn)):
方法一:如果切換的頁面不多,可以直接在main.js文件內(nèi)配置。
方法二:如果切換的頁面較多,可以建一個專門用于路由的js文件,里面配置路徑。
1)router.js配置文件
2)main.js里引入router.js路由文件
2、組件里調(diào)用
1)使用router-view標簽給vue組件的跳轉(zhuǎn)提供一個容器
2)使用router-link標簽實現(xiàn)跳轉(zhuǎn)(它類似于a標簽,區(qū)別在于router-link跳轉(zhuǎn)不需要刷新頁面)
跳轉(zhuǎn)至table組件:
3、實現(xiàn)效果
項目的首頁:
點擊table后跳轉(zhuǎn):
總結(jié)
以上所述是小編給大家介紹的vue2.0項目實現(xiàn)路由跳轉(zhuǎn)的方法詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
vue2 前后端分離項目ajax跨域session問題解決方法
本篇文章主要介紹了vue2 前后端分離項目ajax跨域session問題解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04Vue全局監(jiān)測錯誤并生成錯誤日志實現(xiàn)方法介紹
在做完一個項目后,之后的維護尤為重要。這時,如果項目配置了錯誤日志記錄,這樣能大大減少維護難度。雖然不一定能捕獲到全部的錯誤,但是一般的錯誤還是可以監(jiān)測到的。這樣就不用測試人員去一遍一遍復現(xiàn)bug了2022-10-10關于vue中根據(jù)用戶權限動態(tài)添加路由的問題
每次路由發(fā)生變化時都需要調(diào)用一次路由守衛(wèi),并且store中的數(shù)據(jù)會在每次刷新的時候清空,因此需要判斷store中是否有添加的動態(tài)路由,本文給大家分享vue中根據(jù)用戶權限動態(tài)添加路由的問題,感興趣的朋友一起看看吧2021-11-11vue雙向錨點實現(xiàn)過程簡易版(scrollIntoView)
這篇文章主要介紹了vue雙向錨點實現(xiàn)過程簡易版(scrollIntoView),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07vue搜索頁開發(fā)實例代碼詳解(熱門搜索,歷史搜索,淘寶接口演示)
這篇文章主要介紹了vue搜索頁開發(fā)實例(熱門搜索,歷史搜索,淘寶接口演示),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04