vue中vue-router安裝與配置方法步驟詳解

Posted on by

前言

vue-router 是 vue.js 官方的路由插件，裡面組件和 URL 的映射關系由 vue-route 幫我們管理。

在 vue-router 的單頁面應用中，頁面的路徑的改變就是組件的切換。

第一步：

1.正常初始化項目的時候，會有個 vue-router 供我們選擇。

2.如果你不知道插件俺沒安裝，看下圖中是否有此信息即可，如有即存在。

3.如果不存在則通過代碼安裝插件即可。

代碼：npm install vue-router –save

這裡要備註一下有的人安裝的時候會報錯，大致意思是說要選擇vue-router版本，報錯信息如下

從新敲入代碼：npm install [email protected] –save 建議3.5.2這個版本

出現這樣表示安裝成功啦。

第二步：

然後再index.js 中內容配置如下：

第三步：

再目錄components下面創建要用的組件 

 在路由文件中引入剛才創建的組件，以及配置組件和路徑的映射關系

 現在點擊登錄下方就會跳出登錄頁面的內容，點擊註冊頁面就會跳出註冊頁面。

一般在進入頁面的時候都會有個默認的首頁信息，比如我想一刷新頁面或者一打開頁面在下面的內容就顯示的是註冊頁面的內容，那麼這個時候我們就要用到路由的默認路徑。

總結

到此這篇關於vue中vue-router安裝與配置方法步驟的文章就介紹到這瞭,更多相關vue vue-router安裝與配置內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：