作為乙個vue的初學者，今天主要分享一下vue路由的基本使用方法，以及如何使用vue cil快速的建立乙個vue專案，若有那點不對，請及時提出，謝謝各位。
全域性安裝：
npm install -g vue-clivue create 專案名1、vue中路由的安裝：
npm i vue-routerimport vuerouter from 'vue-router' //引入路由vue.use(vuerouter);var router=new vuerouter(,{}]})注意：裡面的routes不能改，表示路由配置資訊
//建立路由
const router=new vuerouter(,,,]
})
這是其中的乙個元件檔案cart.vue內容：
5、路由基礎用法
以後所有的路由對應的元件都會渲染在此節點內router-view
【首頁】
【列表頁】
【購物車】
【首頁-link】
【首頁-name】
最後在終端輸入npm run serve
在瀏覽器器中輸入以下任意乙個
這就是路由的基本用法。
在做路由巢狀的時候可以使用children屬性實現
裡面跟著乙個陣列（存放元件）
注意：在需要巢狀的元件中新增 用來放子元件
以下通過簡單**進行演示：
比如我在home元件中新增子元件，在對應路由下面加乙個children物件，裡面的內容還是我們熟悉的寫法
但是需要在home.vue中新增乙個router-view標籤用來顯示子元件
在路由中path有兩種寫法
（1）path:'/user', // path加/會直接跳到根節點(name的整個位址都會被替換)
（2）'order', //path不加/，會在父路由的path後面進行拼接
在路由檔案匯出 export default router;
在main.js引入
import router from './router'
vue-router頁面傳遞引數的兩種方式
使用params傳參 url/:引數
需要在路由表中做配置，如果不在路由中進行配置也可以進行傳遞
在router-link中設定需要傳遞的引數
如果使用to+path進行跳轉，需要傳遞的引數是必須在路由表中進行配置
如果使用 :to 繫結乙個物件傳遞引數，那麼多餘的引數可以不用進行配置直接傳遞
在獲取引數的時候用this.$route.params進行獲取
或者this.$route.query獲取url中傳遞的引數以?形式分割
在列表頁新增資料並能到詳情頁
列表頁資料：
通過params進行傳遞引數 引數形式:/id，在瀏覽器顯示：url/引數
（1）通過name傳參
路由設定
（2）通過path,以字串拼接方式傳參
（3）使用query形式進行傳值，瀏覽器顯示：url?引數1&引數2
在詳情頁可以通過以下兩種方法獲取引數：
this.$route.params
this.$route.query
詳情頁**如下：
傳遞的引數為：}.}
因此，可以通過此方法來獲取自己想要得到的引數值。
以上就是今天的分享，歡迎各位大神指點！！！
Vue 路由 基礎使用方法
在前端實現路由跳轉的 也叫單頁面 要實現單頁面 其實是需要前後端配合的。在伺服器端，不管url請求哪個頁面，都統統返回指定頁 通常是index.html 在前端實現路由跳轉能很大程度上減輕伺服器壓力，也能提高專案的效能。最明顯的就是使用者在填寫表單，如果不小心點錯了別的按鈕，跳轉到別的頁面，當使用者...
vue的基礎使用方法
vue create 注意後面是有點的 按向下的箭頭選擇 manually select features 一般情況下可以選擇 用空格控制選擇與否 choose vue version babel css pre processors linter formatter 2.xsass scss wi...
vue 各種使用方法
安裝 vue cli3 安裝 vue cli npm install g vue cli 建立乙個專案 vue create baifubin 開啟圖形化介面 vue ui 安裝 vue 移動端rem 通過cli3 直接搜尋或npm npm install postcss pxtorem postc...