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