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