1.?什么是vue-router?

所謂的vue-router, 通俗的來講 就是路由 但是這個和后端路由是不同的, 這是前端路由,是url和單頁面組件的對應關系, 也就是SPA(單頁應用)的路徑管理器。再通俗的說，vue-router就是WebApp的鏈接路徑管理系統。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。路由模塊的本質 就是建立起url和頁面之間的映射關系。?

2.?vue-router的整合及抽取

VueRouter的整合的步驟是固定的

首先得先安裝vue-router 使用npm i vue-router

1.?導入vue-router

2.?使用Vue.use()方法來注冊路由

3.?導入單頁面組件

4.?寫路由規則

5.?實例化路由對象

6.?掛載到頂級Vue的實例上

其實路由的跳轉其實就是我們之前所寫的tab欄的效果， 只是他的功能更加強大一點， 而且對應的路由肯定會有對應的內容來顯示的， 那么內容顯示在哪兒呢？?其實就是使用router-view作為占位符， 將每次路由地址所指向的組件渲染在這個router-view占位的地方， 所以這就大大節省的我們的代碼量， 但是這也存在一個問題， ?所有的路由對應單一的組件， 那么如果需要攜帶參數呢？?比如查看某一id的詳情內容， 或者修改某一id對應的內容 那么就必須攜帶id過去， 那么怎么攜帶呢？?這里就涉及另外一個知識點了， 就是動態路由匹配

3. 動態路由匹配

我們在路由規則中使用：來對參數進行標記， 當解析這個地址的時候， 遇到：就當作參數來解析， 那么傳值的時候， 直接傳就可以了， 這就比較方便， 那么到了詳情頁面， 獲取參數的時候， 直接使用this.$router.params.id來獲取對應的id, 這是因為只要組件中使用了vue-router, 那么就會自動向data里面添加$router這樣的一個參數 會把傳輸過程中的一些信息存儲在這個參數里面, 方便取用

這個問題解決了, 接下來就是解決路由抽取的問題了

4. Vue-router的抽取

其實在實際的項目開發中, ?我們會有很多的路由規則, 以及導入很多的組件, 那就為了功能明確, 我們需要把router相關的部分抽取出來

這就是路由的基本使用, ??想要是到更多用法, 請進入vue的官方文檔查看

總結

以上是生活随笔為你收集整理的vue 获取url地址的参数_Vue之vuerouter的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。