講解vue router之什麼是程式設計式路由

2022-09-29 12:30:11 字數 948 閱讀 4126

前言:程式設計式路由在我們的專案使用過程中最常用的的方法了。

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.你必須至少在上述的若干方面精通其中的某一項或幾項,對於其它項也要有一定的涉獵或最基本的了解。並且你的精通項必須與公司的業務形態相...