1.?什么是vue-router?

所謂的vue-router, 通俗的來(lái)講 就是路由 但是這個(gè)和后端路由是不同的, 這是前端路由,是url和單頁(yè)面組件的對(duì)應(yīng)關(guān)系, 也就是SPA(單頁(yè)應(yīng)用)的路徑管理器。再通俗的說(shuō)，vue-router就是WebApp的鏈接路徑管理系統(tǒng)。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁(yè)面應(yīng)用。vue的單頁(yè)面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問(wèn)路徑，并將路徑和組件映射起來(lái)。傳統(tǒng)的頁(yè)面應(yīng)用，是用一些超鏈接來(lái)實(shí)現(xiàn)頁(yè)面切換和跳轉(zhuǎn)的。在vue-router單頁(yè)面應(yīng)用中，則是路徑之間的切換，也就是組件的切換。路由模塊的本質(zhì) 就是建立起url和頁(yè)面之間的映射關(guān)系。?

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

VueRouter的整合的步驟是固定的

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

1.?導(dǎo)入vue-router

2.?使用Vue.use()方法來(lái)注冊(cè)路由

3.?導(dǎo)入單頁(yè)面組件

4.?寫(xiě)路由規(guī)則

5.?實(shí)例化路由對(duì)象

6.?掛載到頂級(jí)Vue的實(shí)例上

其實(shí)路由的跳轉(zhuǎn)其實(shí)就是我們之前所寫(xiě)的tab欄的效果， 只是他的功能更加強(qiáng)大一點(diǎn)， 而且對(duì)應(yīng)的路由肯定會(huì)有對(duì)應(yīng)的內(nèi)容來(lái)顯示的， 那么內(nèi)容顯示在哪兒呢？?其實(shí)就是使用router-view作為占位符， 將每次路由地址所指向的組件渲染在這個(gè)router-view占位的地方， 所以這就大大節(jié)省的我們的代碼量， 但是這也存在一個(gè)問(wèn)題， ?所有的路由對(duì)應(yīng)單一的組件， 那么如果需要攜帶參數(shù)呢？?比如查看某一id的詳情內(nèi)容， 或者修改某一id對(duì)應(yīng)的內(nèi)容 那么就必須攜帶id過(guò)去， 那么怎么攜帶呢？?這里就涉及另外一個(gè)知識(shí)點(diǎn)了， 就是動(dòng)態(tài)路由匹配

3. 動(dòng)態(tài)路由匹配

我們?cè)诼酚梢?guī)則中使用：來(lái)對(duì)參數(shù)進(jìn)行標(biāo)記， 當(dāng)解析這個(gè)地址的時(shí)候， 遇到：就當(dāng)作參數(shù)來(lái)解析， 那么傳值的時(shí)候， 直接傳就可以了， 這就比較方便， 那么到了詳情頁(yè)面， 獲取參數(shù)的時(shí)候， 直接使用this.$router.params.id來(lái)獲取對(duì)應(yīng)的id, 這是因?yàn)橹灰M件中使用了vue-router, 那么就會(huì)自動(dòng)向data里面添加$router這樣的一個(gè)參數(shù) 會(huì)把傳輸過(guò)程中的一些信息存儲(chǔ)在這個(gè)參數(shù)里面, 方便取用

這個(gè)問(wèn)題解決了, 接下來(lái)就是解決路由抽取的問(wèn)題了

4. Vue-router的抽取

其實(shí)在實(shí)際的項(xiàng)目開(kāi)發(fā)中, ?我們會(huì)有很多的路由規(guī)則, 以及導(dǎo)入很多的組件, 那就為了功能明確, 我們需要把router相關(guān)的部分抽取出來(lái)

這就是路由的基本使用, ??想要是到更多用法, 請(qǐng)進(jìn)入vue的官方文檔查看

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。