講解vue-router之什么是編程式路由
前言：編程式路由在我們的項(xiàng)目使用過(guò)程中最常用的的方法了。
GitHub：https://github.com/Ewall1106/mall/
什么是編程式路由呢？就是通過(guò)寫(xiě)js代碼來(lái)實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)
1.$router.push('name'); 或者 $router.push({path: 'name'});
首先我們來(lái)講講簡(jiǎn)單的，上面兩個(gè)方法記住，等效的。
① 還是在test.vue組件里面寫(xiě)個(gè)div并給它添加一個(gè)click跳轉(zhuǎn)事件：
div上添加一個(gè)click點(diǎn)擊事件
② 在view文件下新建一個(gè)goods.vue
goods.vue
③ 在router中引入這個(gè)goods組件
路由
④ 打開(kāi)路徑為test的頁(yè)面并點(diǎn)擊
localhost
⑤ ok，點(diǎn)一下我們就到goods頁(yè)面了，實(shí)現(xiàn)了跟router-view標(biāo)簽一樣的效果
goods頁(yè)面
Ok，到這里我們已經(jīng)實(shí)現(xiàn)了編程式路由的跳轉(zhuǎn)了，接下來(lái)我們來(lái)試試路由攜帶參數(shù)跳轉(zhuǎn)并接受參數(shù)。
2.$router.push({path: 'name?a=123'}) 或者 $router.push({path: 'name',query:{a:123}})這兩種方式都可以
話不多說(shuō)，看圖你應(yīng)該能看懂：
路由跳轉(zhuǎn)并攜帶參數(shù)
② 在goods.vue中輸入
提醒一句，這里的獲取上一級(jí)頁(yè)面?zhèn)鬟^(guò)來(lái)的參數(shù)是$route.query.goodsId，是$route不是$router：
goods.vue
③ ok，我們就可以看到頁(yè)面中顯示上級(jí)頁(yè)面?zhèn)鬟^(guò)來(lái)的參數(shù)了：
localhost
goods.vue
3.$router.go();
這個(gè)就隨意提一下，就是類似于history.go()的方法，括號(hào)里面填個(gè)1就是前進(jìn)一級(jí)頁(yè)面，-1就后退一級(jí)頁(yè)面。差不多就是這樣。
參考學(xué)習(xí)
https://router.vuejs.org/zh-cn/
https://developer.mozilla.org/zh-CN/docs/Web/API/History
http://www.dbjr.com.cn/article/141020.htm
http://www.dbjr.com.cn/article/141022.htm
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue路由的配置和頁(yè)面切換的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vuex + axios 做登錄驗(yàn)證 并且保存登錄狀態(tài)的實(shí)例
今天小編就為大家分享一篇vuex + axios 做登錄驗(yàn)證 并且保存登錄狀態(tài)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在?Vue3?中，有許多與響應(yīng)式相關(guān)的函數(shù)，例如?toRef、toRefs、isRef、unref?等等,本文將詳細(xì)介紹這些函數(shù)的用法，讓我們?cè)趯?shí)際開(kāi)發(fā)中知道應(yīng)該使用哪些?API?并能夠熟練地回答面試官的相關(guān)問(wèn)題2023-08-08
vue指令?v-bind的使用和注意需要注意的點(diǎn)
這篇文章主要給大家分享了?v-bind的使用和注意需要注意的點(diǎn)，下面文章圍繞?v-bind指令的相關(guān)資料展開(kāi)內(nèi)容且附上詳細(xì)代碼?需要的小伙伴可以參考一下，希望對(duì)大家有所幫助2021-11-11
vue使用JSEncrypt對(duì)密碼本地存儲(chǔ)時(shí)加解密的實(shí)現(xiàn)
本文主要介紹了vue使用JSEncrypt對(duì)密碼本地存儲(chǔ)時(shí)加解密，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue--Router動(dòng)態(tài)路由的用法示例詳解
這篇文章主要介紹了Vue--Router動(dòng)態(tài)路由的用法,很多時(shí)候，我們需要將給定匹配模式的路由映射到同一個(gè)組件，在?Vue?Router?中，我們可以在路徑中使用一個(gè)動(dòng)態(tài)字段來(lái)實(shí)現(xiàn)，我們稱之為路徑參數(shù)，本文對(duì)Vue?Router動(dòng)態(tài)路由相關(guān)知識(shí)給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-08-08
如果你也和我一樣，按照正常的流程下載并且配置了stylus，但是依舊報(bào)錯(cuò)，也許這篇文章就是你的菜，一起來(lái)看看吧2022-08-08
Vue2.0 http請(qǐng)求以及l(fā)oading展示實(shí)例
下面小編就為大家分享一篇Vue2.0 http請(qǐng)求以及l(fā)oading展示實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue實(shí)現(xiàn)商城上貨組件簡(jiǎn)易版
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商城上貨組件簡(jiǎn)易版，50行js代碼實(shí)現(xiàn)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Vue中slot-scope的深入理解（適合初學(xué)者）
這篇文章主要給大家介紹了關(guān)于Vue中slot-scope的深入理解，這個(gè)教程非常適合初學(xué)者,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04