vue中vue-router安裝與配置方法步驟詳解
前言
vue-router 是 vue.js 官方的路由插件，里面組件和 URL 的映射關(guān)系由 vue-route 幫我們管理。
在 vue-router 的單頁(yè)面應(yīng)用中，頁(yè)面的路徑的改變就是組件的切換。
第一步：
1.正常初始化項(xiàng)目的時(shí)候，會(huì)有個(gè) vue-router 供我們選擇。
2.如果你不知道插件俺沒(méi)安裝，看下圖中是否有此信息即可，如有即存在。
3.如果不存在則通過(guò)代碼安裝插件即可。
代碼：npm install vue-router --save
這里要備注一下有的人安裝的時(shí)候會(huì)報(bào)錯(cuò)，大致意思是說(shuō)要選擇vue-router版本，報(bào)錯(cuò)信息如下
從新敲入代碼：npm install vue-router@3.5.2 --save 建議3.5.2這個(gè)版本
出現(xiàn)這樣表示安裝成功啦。
第二步：
然后再index.js 中內(nèi)容配置如下：
第三步：
再目錄components下面創(chuàng)建要用的組件
在路由文件中引入剛才創(chuàng)建的組件，以及配置組件和路徑的映射關(guān)系
現(xiàn)在點(diǎn)擊登錄下方就會(huì)跳出登錄頁(yè)面的內(nèi)容，點(diǎn)擊注冊(cè)頁(yè)面就會(huì)跳出注冊(cè)頁(yè)面。
一般在進(jìn)入頁(yè)面的時(shí)候都會(huì)有個(gè)默認(rèn)的首頁(yè)信息，比如我想一刷新頁(yè)面或者一打開(kāi)頁(yè)面在下面的內(nèi)容就顯示的是注冊(cè)頁(yè)面的內(nèi)容，那么這個(gè)時(shí)候我們就要用到路由的默認(rèn)路徑。
總結(jié)
到此這篇關(guān)于vue中vue-router安裝與配置方法步驟的文章就介紹到這了,更多相關(guān)vue vue-router安裝與配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue3之狀態(tài)管理器(Pinia)詳解及使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享
這篇文章主要為大家介紹了Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue 跳轉(zhuǎn)到其他頁(yè)面并關(guān)閉當(dāng)前頁(yè)面的實(shí)現(xiàn)代碼
我在做一個(gè)調(diào)用虛擬機(jī)錄屏的一個(gè)操作,需要在瀏覽器頁(yè)面上,點(diǎn)擊按鈕后,關(guān)閉當(dāng)前頁(yè)面里的某一個(gè)頁(yè)面,并且打開(kāi)瀏覽器新頁(yè)面是虛擬機(jī)的頁(yè)面,本文給大家介紹vue 跳轉(zhuǎn)到其他頁(yè)面并關(guān)閉當(dāng)前頁(yè)面的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2023-09-09
Vue 3 + Element Plus 封裝單列控制編輯的可編輯表格
在Web應(yīng)用開(kāi)發(fā)中實(shí)現(xiàn)表格數(shù)據(jù)編輯功能至關(guān)重要,本文將詳細(xì)介紹如何使用Vue3和ElementPlus庫(kù)來(lái)構(gòu)建一個(gè)支持單列編輯的表格組件,本教程詳細(xì)闡述了組件創(chuàng)建過(guò)程和數(shù)據(jù)綁定機(jī)制,幫助你快速掌握Vue3中表格編輯功能的實(shí)現(xiàn),感興趣的朋友一起看看吧2024-09-09
vue使用jsencrypt實(shí)現(xiàn)rsa前端加密的操作代碼
這篇文章主要介紹了vue使用jsencrypt實(shí)現(xiàn)rsa前端加密,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
淺談vue-router2路由參數(shù)注意的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談vue-router2路由參數(shù)注意的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
上傳圖片不管是后臺(tái)還是前端小程序，上傳圖片都是一個(gè)比不可少的功能有時(shí)候需要好幾個(gè)頁(yè)面都要上傳圖片，每個(gè)頁(yè)面都寫(xiě)一個(gè)非常不方便，本文就給大家介紹vue如何封裝一個(gè)上傳多張圖片的組件,需要的朋友可以參考下2023-07-07
vue2封裝webSocket的實(shí)現(xiàn)(開(kāi)箱即用)
在Vue2中,可以使用WebSocket實(shí)時(shí)通信,本文主要介紹了vue2封裝webSocket的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
今天要講講Vue2.0了。最近將公司App3.0用vue2.0構(gòu)建了一個(gè)web版，因?yàn)槭堑谝淮问褂胿ue，而且一開(kāi)始使用的時(shí)候2.0出來(lái)一個(gè)月不到，很多坑都是自己去踩的，現(xiàn)在項(xiàng)目要上線了，所以記錄一些過(guò)程2017-01-01
vue3使用vue-count-to組件的實(shí)現(xiàn)
這篇文章主要介紹了vue3使用vue-count-to組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12