前言:程式設計式路由在我們的專案使用過程中最常用的的方法了。
github:
什麼是程式設計式路由呢?就是通過寫js**來實現頁面的跳轉
1.$router.push('name'); 或者 $router.push();
首先我們來講講簡單的,上面兩個方法記住,等效的。
① 還是在test.vue元件裡面寫個div並給它新增乙個click跳轉事件:
div上新增乙個click點選事件
② 在view檔案下新建乙個goods.vue
goods.vue
③ 在router中引入這個goods元件
路由④ 開啟路徑為test的頁面並點選
localhost
⑤ ok,點一下我們就到goods頁面了,實現了跟router-view標籤一樣的效果
goods頁面
ok,到這裡我們已經實現了程式設計式路由的跳轉了,接下來我們來試試路由攜帶引數跳轉並接受引數。
2.$router.push() 或者 $router.push(})這兩種方式都可以
話不多說,看圖你應該能看懂:
路由跳轉並攜帶引數
② 在goods.vue中輸入
提醒一句,這裡的獲取上一級頁面傳過來的引數是$route.query.goodsid,是$route不是$router:
goods.vue
③程式設計客棧 ok,我們就可以看到頁面中顯示上級頁面傳過來的引數了:
localhost
goods.vue
3.$router.go();
這個就隨意提一下,就是類似於history.go()的方法,括號裡面填個1就是前進一www.cppcns.com級頁面,-1就後退一級頁面。差不多就是這樣。
參考學習
本文標題: 講解vue-router之什麼是程式設計式路由
本文位址: /ruanjian/j**a/229119.html
講解vue router之什麼是動態路由
github 1 動態路由有乙個什麼適用場景呢?比如在寫商品詳www.cppcns.com情頁面的時候,頁面結構都一樣,只是商品id的不同,所以這個時候就可以用動態路由動態。2 官方文件 首先我們來看看官方文件上是怎麼解釋動態路由的?你可以在乙個路由中設定多段 程式設計客棧路徑引數 對應的值都會設定...
什麼是高併發 ,詳細講解什麼是高併發 ,詳細講解
高併發 high concurrency 是網際網路分布式系統架構設計中必須考慮的因素之一,它通常是指,通過設計保證系統能夠同時並行處理很多請求。高併發相關常用的一些指標有響應時間 response time 吞吐量 throughput 每秒查詢率qps query per second 併發使用...
什麼是全棧 舉例講解
1 公司創始人 co founder,全棧 技術 產品 設計 運營 銷售 法務 融資 pr,作為公司創始人,在早期真的就是chief everything officer.你必須至少在上述的若干方面精通其中的某一項或幾項,對於其它項也要有一定的涉獵或最基本的了解。並且你的精通項必須與公司的業務形態相...