前言：編程式路由在我們的項目使用過程中最常用的的方法了。

GitHub：https://github.com/Ewall1106/mall/

什么是編程式路由呢？就是通過寫js代碼來實現頁面的跳轉

1.$router.push('name'); 或者 $router.push({path: 'name'});

首先我們來講講簡單的，上面兩個方法記住，等效的。

① 還是在test.vue組件里面寫個div并給它添加一個click跳轉事件：

div上添加一個click點擊事件

② 在view文件下新建一個goods.vue

goods.vue

③ 在router中引入這個goods組件

路由

④ 打開路徑為test的頁面并點擊

localhost

⑤ ok，點一下我們就到goods頁面了，實現了跟router-view標簽一樣的效果

goods頁面

Ok，到這里我們已經實現了編程式路由的跳轉了，接下來我們來試試路由攜帶參數跳轉并接受參數。

2.$router.push({path: 'name?a=123'}) 或者 $router.push({path: 'name',query:{a:123}})這兩種方式都可以

話不多說，看圖你應該能看懂：

路由跳轉并攜帶參數

② 在goods.vue中輸入

提醒一句，這里的獲取上一級頁面傳過來的參數是$route.query.goodsId，是$route不是$router：

goods.vue

③ ok，我們就可以看到頁面中顯示上級頁面傳過來的參數了：

localhost

goods.vue

3.$router.go();

這個就隨意提一下，就是類似于history.go()的方法，括號里面填個1就是前進一級頁面，-1就后退一級頁面。差不多就是這樣。

參考學習

https://router.vuejs.org/zh-cn/
https://developer.mozilla.org/zh-CN/docs/Web/API/History
//www.survivalescaperooms.com/article/141020.htm
//www.survivalescaperooms.com/article/141022.htm

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。