vue中vue-router安裝與配置方法步驟詳解
前言
vue-router 是 vue.js 官方的路由插件，里面組件和 URL 的映射關系由 vue-route 幫我們管理。
在 vue-router 的單頁面應用中，頁面的路徑的改變就是組件的切換。
第一步：
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)建的組件，以及配置組件和路徑的映射關系
現(xiàn)在點擊登錄下方就會跳出登錄頁面的內(nèi)容，點擊注冊頁面就會跳出注冊頁面。
一般在進入頁面的時候都會有個默認的首頁信息，比如我想一刷新頁面或者一打開頁面在下面的內(nèi)容就顯示的是注冊頁面的內(nèi)容，那么這個時候我們就要用到路由的默認路徑。
總結
到此這篇關于vue中vue-router安裝與配置方法步驟的文章就介紹到這了,更多相關vue vue-router安裝與配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue radio單選框,獲取當前項(每一項)的value值操作
這篇文章主要介紹了vue radio單選框,獲取當前項(每一項)的value值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue3?中的?Composition?API?是一種新的編寫組件邏輯的方式,它提供了更好的代碼組織、類型推導、測試支持和復用性,本文為大家介紹了vue3利用組合式api創(chuàng)建單文件組件的方法,感興趣的可以了解下2023-08-08
關于vue-lunar-full-calendar的使用說明
這篇文章主要介紹了關于vue-lunar-full-calendar的使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue3第二次傳遞數(shù)據(jù)方法無法獲取到最新的值的解決方法
這篇文章主要介紹了vue3第二次傳遞數(shù)據(jù)方法無法獲取到最新的值,本文通過實例圖文相結合給大家詳細講解,感興趣的朋友一起看看吧2025-04-04
vue-element-admin中node-sass換成dart-sass,安裝依賴報code?128多種問題的解決
這篇文章主要介紹了vue-element-admin中node-sass換成dart-sass,安裝依賴報code?128多種問題的解決方法,本文給大家分享問題原因分析及解決方法，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue日志之如何select選中默認值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
凡是做SPA的項目,特別是移動端的SAP項目,首屏加載速度必定是一個繞不過去的話題,下面這篇文章主要給大家介紹了關于Vue頁面首次載入優(yōu)化的相關資料,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue3中的父子組件通訊詳情，文章以傳統(tǒng)的props展開主題相關資料內(nèi)容，具有一定參考價值，需要的小伙伴可以參考一下2022-06-06
文章介紹了在Vue中操作select元素并實時獲取選中的option值的方法,通過使用`@change`事件并傳遞參數(shù),可以實現(xiàn)動態(tài)獲取選中的值2025-01-01
雖然老早就看過很多echarts的例子， 但自己接觸的項目中一直都沒有真正用到過，直到最近才開始真正使用，下面這篇文章主要給大家介紹了關于在vue中添加Echarts圖表的基本使用教程，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-11-11