學完vue2還是決定先做一個比較經典，也比較大的項目來練練手好一點，vue3的知識不用那麼著急，先把vue2用熟練了，vue3隨時都能學。
這個項目確實很經典包含了登錄註冊、購物車電商網站該有的都有，後面還會結合elementUI構件後臺管理界面。拭目以待！

一.初始化腳手架環境

vue create創建vue的腳手架環境

裡面什麼是什麼配置文件這些就不同多說了，前面已經說過了，來說一下沒有說過的一些配置。

• 當我們npm run serve跑項目的時候自動打開瀏覽器，對package.json啟動serve的命令加一個open參數

  

• 關閉eslint校驗功能

  

• src文件簡寫，配置他的別名，因為後面可能經常會引入這個文件夾下的東西，經常要./或者../等，所以直接配置src文件夾別名為@，在jsconfig.js裡面配置，註意新版腳手架一般都已經配置好了

  

二.項目路由分析

首先分析下組件

路由組件：首頁（home）、搜索頁（search）、登錄頁（login）、註冊頁（register）

非路由組件：頭部header（首頁、搜索頁、登錄、註冊）、尾部footer（首頁、搜索頁）

三.Header和Footer非路由組件

根據以前創建一個項目的步驟，首先分好組件，然後完成靜態頁面創建，可以先放在App裡面運行一下，然後把各自的代碼放到組件裡面去，拆分組件完成靜態頁面嘛，第二步就是完成完成動態數據的創建這些，第三步就是這些業務邏輯事件這些的完成，所以這裡先完成Header和Footer的文件夾創建，註意以前是直接在components裡面創建一般組件，現在是需要個文件夾裡面再來個index.vue，因為這個組件可能有其他的依賴比如一些圖片等所以還在這個文件夾裡面操作一些其他的東西。

然後這裡的css格式採用的是less格式，所以需要下載 less和less-loader

組件引入到App組件後發現還是有點css沒有完整，那是因為有一些公共樣式，需要引入到public文件夾，同時link方式引入到index.html頁面，這裡同時也要註意一下，後面打包的時候在public文件夾下麵的文件會原封不動打包到dist目錄裡面去

啟動項目發現一個錯誤，就是代碼裡面有一個需要引入images裡面的圖片，所以前面說需要將一個組件單獨創建一個文件夾，因為還有可能放入其他東西的

現在就可以啟動成功了，這個時候需要將公共樣式放到public下麵，並link引入到index.html

靜態組件導入完畢

四.路由組件

下麵開始佈置路由組件，剛纔分析的四個路由組建配置在pages文件夾下，同樣的也是採用文件夾形式

然後就開始配置router配置文件

在入口文件導入並加入vm配置項

最後在該呈現我們路由組建的位置用router-view標簽進行占位即可完成路由的搭建

1.路由組件和非路由組件的區別

• 路由組件一般是放在pages文件夾裡面，非路由組件一般是放在components文件夾裡面
• 路由組件需要在router配置文件裡面進行註冊，好讓router進行kv的匹配，非路由組件註冊在父級組件，以組件標簽形式使用
• 註冊完路由也就是在vm寫完router之後，不管是vm還是vc身上都有了$router（一般進行編程式導航跳轉，push、replace等）、$route（一般獲取路由的信息，如query、路徑、params等）兩個api

2.路由的跳轉

兩個跳轉方法，一個是router-link，一個是通過router這個api的push、replace方法，前者是聲明式導航，後者是編程式導航，聲明式導航能做到的編程式導航都可以做到，但是編程式導航還可以完成一些邏輯要求，比如我們點擊登錄這個時候不光是要跳轉還要給數據發到ajax伺服器，所以這個時候只能編程式導航了。

首先我們的登錄註冊直接跳到登錄註冊的頁面上去，沒有其他邏輯，所以直接用router-link

點擊搜索按鈕後期有一些業務邏輯，採用編程式跳轉

3.路由重定向

在項目跑起來後，訪問/根目錄立馬會跳轉到首頁，一個新的路由，匹配的key為*，一個全新的配置項 redirect值為我們要重定向的組件路徑

五.路由元信息的使用

現在的問題，我們home和search這兩個組件有footer，但是登錄和註冊沒有footer組件，通過v-show來做，主要是判斷的依據，可以用到當前切換過來的這個$route這個api裡面的path或者name，但還是那個老問題，如果需要配置幾百個路由組件就有點麻煩了，這裡可以給meta路由元信息添加自定義信息，誰該顯示，誰不該顯示，直接v-show判斷這個meta值就可以了

六.路由傳遞參數

當我們點擊搜索要將我們的參數傳到搜索頁面，有兩種參數，一種是query一種是params看你想要哪種，如果要獲取params動態參數那麼首先要到路由配置項將我們匹配的規則修改一下，註意占位要加引號，並且params要發參數過去，對象配置裡面只能用name，所以最好這裡也把name配置好

這裡我把兩個參數都獲取過來

search界面接受參數

1.路由傳參經典面試題

• 路由傳參對象寫法path能和params一起使用嗎？

  不能

• 如何指定params參數可傳可不傳？

  如果配置路由項的時候，已經配置好了params的路由匹配規則，但是你傳參的時候你又不傳params，那麼這個時候就會出現bug路徑會出現問題

  

  

  所以真的想要實現這個動態參數可傳可不傳的效果需要在路由配置裡面加上一個？，跟正則裡面一樣？表示0到多個

  

  這樣就不會出現路徑問題了，這個params參數就可以可傳可不傳了。

• 上面這種方法雖然可以實現params參數可傳可不傳，但是如果傳的是一個空字元串又會出現bug，路徑又會出現問題，search這個路徑又沒有了，這個要怎麼解決？

  在我們傳params對象傳參這裡通過一個亦或語法來解決

  

• 路由組件能不能傳遞props數據？

  可以，而且有三種第一種是寫死的數據，在路由配置裡面寫

  

  

  第二種是值為true，表示會將傳過來的所有params數據接受到

  

  

  第三種是函數的形式，並且可以拿到這個路由組建的$route,，並且跟計算屬性一樣靠的就是和這個返回值，那麼就可以拿到query了，params更不用說了