首先先下載安裝vue-cli4.5
npm install -g @vue/cli
然后創(chuàng)建項(xiàng)目時(shí)進(jìn)入到項(xiàng)目路徑下
vue create [項(xiàng)目名]
安裝選項(xiàng)選擇vue3,接來(lái)下安裝的步驟就不詳細(xì)說(shuō)了
安裝完成后打開(kāi)項(xiàng)目src目錄創(chuàng)建一個(gè)router.js
image.png
然后在這個(gè)js里引入vue-router 下面是代碼截圖
image.png
上面就是路由的配置項(xiàng) 在vue3.0里面路由的寫(xiě)法跟vue2不太一樣
可以看到我在上面做了一個(gè)路由重定向參照vue-router官網(wǎng)的案例二，重定向的目標(biāo)也可以是一個(gè)命名的路由
在第一個(gè)路由里的redirect對(duì)象里指向我的第二個(gè)命名的路由name,當(dāng)然也可以指向第三個(gè)路由about
我這個(gè)需求做的安卓app+vue混合式開(kāi)發(fā) 所以要重定向項(xiàng)目名；
然后寫(xiě)好router.js在main.js里把路由掛載到vue上，vue3 掛載方法跟vue2不一樣了
重點(diǎn)聲明下雖然我是src/router/index.js但是這樣引入照樣可以找到index.js
應(yīng)該是默認(rèn)叫index.js 因?yàn)槲野裪ndex.js改成router.js就啟動(dòng)報(bào)錯(cuò)了找不到路由了
image.png
番外話 vuex也是同理
image.png
下圖是vue-router官網(wǎng)重定向的案例
image.png
可以看到我現(xiàn)在啟動(dòng)項(xiàng)目是在重定向前應(yīng)該是 http://localhost:3000/
重定向后指向了我的第二個(gè)命名的路由 默認(rèn)打開(kāi)項(xiàng)目變成了http://localhost:3000/CloudStudy-App
image.png
