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è)面或者一打開頁(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)文章
vue radio單選框,獲取當(dāng)前項(xiàng)(每一項(xiàng))的value值操作
這篇文章主要介紹了vue radio單選框,獲取當(dāng)前項(xiàng)(每一項(xiàng))的value值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue3?中的?Composition?API?是一種新的編寫組件邏輯的方式,它提供了更好的代碼組織、類型推導(dǎo)、測(cè)試支持和復(fù)用性,本文為大家介紹了vue3利用組合式api創(chuàng)建單文件組件的方法,感興趣的可以了解下2023-08-08
關(guān)于vue-lunar-full-calendar的使用說(shuō)明
這篇文章主要介紹了關(guān)于vue-lunar-full-calendar的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue3第二次傳遞數(shù)據(jù)方法無(wú)法獲取到最新的值的解決方法
這篇文章主要介紹了vue3第二次傳遞數(shù)據(jù)方法無(wú)法獲取到最新的值,本文通過(guò)實(shí)例圖文相結(jié)合給大家詳細(xì)講解,感興趣的朋友一起看看吧2025-04-04
vue-element-admin中node-sass換成dart-sass,安裝依賴報(bào)code?128多種問(wèn)題的解決
這篇文章主要介紹了vue-element-admin中node-sass換成dart-sass,安裝依賴報(bào)code?128多種問(wèn)題的解決方法,本文給大家分享問(wèn)題原因分析及解決方法，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue日志之如何select選中默認(rèn)值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
凡是做SPA的項(xiàng)目,特別是移動(dòng)端的SAP項(xiàng)目,首屏加載速度必定是一個(gè)繞不過(guò)去的話題,下面這篇文章主要給大家介紹了關(guān)于Vue頁(yè)面首次載入優(yōu)化的相關(guān)資料,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue3中的父子組件通訊詳情，文章以傳統(tǒng)的props展開主題相關(guān)資料內(nèi)容，具有一定參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
文章介紹了在Vue中操作select元素并實(shí)時(shí)獲取選中的option值的方法,通過(guò)使用`@change`事件并傳遞參數(shù),可以實(shí)現(xiàn)動(dòng)態(tài)獲取選中的值2025-01-01
雖然老早就看過(guò)很多echarts的例子， 但自己接觸的項(xiàng)目中一直都沒(méi)有真正用到過(guò)，直到最近才開始真正使用，下面這篇文章主要給大家介紹了關(guān)于在vue中添加Echarts圖表的基本使用教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-11-11