講解vue-router之什么是編程式路由
前言：編程式路由在我們的項(xiàng)目使用過程中最常用的的方法了。
GitHub：https://github.com/Ewall1106/mall/
什么是編程式路由呢？就是通過寫js代碼來實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)
1.$router.push('name'); 或者 $router.push({path: 'name'});
首先我們來講講簡(jiǎn)單的，上面兩個(gè)方法記住，等效的。
① 還是在test.vue組件里面寫個(gè)div并給它添加一個(gè)click跳轉(zhuǎn)事件：
div上添加一個(gè)click點(diǎn)擊事件
② 在view文件下新建一個(gè)goods.vue
goods.vue
③ 在router中引入這個(gè)goods組件
路由
④ 打開路徑為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)了，接下來我們來試試路由攜帶參數(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中輸入
提醒一句，這里的獲取上一級(jí)頁(yè)面?zhèn)鬟^來的參數(shù)是$route.query.goodsId，是$route不是$router：
goods.vue
③ ok，我們就可以看到頁(yè)面中顯示上級(jí)頁(yè)面?zhèn)鬟^來的參數(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://m.fzitv.net/article/141020.htm
http://m.fzitv.net/article/141022.htm
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Vue3封裝登錄功能的兩種實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue.js頁(yè)面驗(yàn)證跳轉(zhuǎn)功能實(shí)現(xiàn)
這篇文章主要介紹了Vue.js頁(yè)面驗(yàn)證跳轉(zhuǎn)功能實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04
vue中iframe使用以及結(jié)合postMessage實(shí)現(xiàn)跨域通信
這篇文章主要介紹了vue中iframe使用以及結(jié)合postMessage實(shí)現(xiàn)跨域通信方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
VUE接入騰訊驗(yàn)證碼功能（滑塊驗(yàn)證）備忘
這篇文章主要介紹了VUE接入騰訊驗(yàn)證碼功能（滑塊驗(yàn)證）備忘,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
vue項(xiàng)目中使用ueditor的實(shí)例講解
下面小編就為大家分享一篇vue項(xiàng)目中使用ueditor的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
contenteditable 屬性為網(wǎng)頁(yè)開發(fā)者提供了一種靈活的方式來創(chuàng)建可編輯的內(nèi)容區(qū)域,使用戶可以直接在網(wǎng)頁(yè)上進(jìn)行內(nèi)容編輯,而無需依賴傳統(tǒng)的輸入框,本文將利用contenteditable打造定制化輸入,感興趣的可以了解下2023-12-12
vue后臺(tái)管理添加多語(yǔ)言功能的實(shí)現(xiàn)示例
這篇文章主要介紹了vue后臺(tái)管理添加多語(yǔ)言功能的實(shí)現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家分享了Map.vue基于百度地圖組件重構(gòu)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
vue中的render函數(shù),它返回的是一個(gè)虛擬節(jié)點(diǎn)vnode,也就是我們要渲染的節(jié)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue頁(yè)面右下角添加懸浮按鈕組件的方法代碼,在Vue項(xiàng)目中,通過在頂層路由文件中添加代碼,可以實(shí)現(xiàn)頁(yè)面左下角懸浮按鈕的功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11