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