宣告式導航和程式設計式導航

2021-10-09 16:46:22 字數 1700 閱讀 3454

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

document<

/title>

<

/head>

<

!--

宣告式導航用在直接渲染到頁面

程式設計式導航用於在js中處理邏輯後需要頁面進行跳轉

宣告式導航

"/url"

>

宣告式導航中的to怎麼寫,那麼程式設計式導航中的引數就怎麼寫

this

.$router.

push()

this

.$router其實就是router,vue為了方便我們在元件中使用router,才新增了this

.$router

this

.$router.

push()

會進行頁面跳轉,同時會在歷史記錄上留下記錄

this

.$router.

replce()

和push功能相同,但是會替換當前頁出現在歷史記錄中

this

.$router.

go(num)

表示距離當前頁的在歷史記錄上的頁數

this

.$router.

back

( this

.$router.

forward

( next中引數寫法同push()

-->

>

"/url"

>

<

/router-link>

"">

<

/router-link>

<

!-- 如果想要攜帶query引數 --

>

"/url?a=1"

>

<

/router-link>

"'/url?a=' + a"

>

<

/router-link>

"}">

<

/router-link>

"}">

<

/router-link>

"handler"

>按鈕<

/button>

<

/div>

"../vue.js"

>

<

/script>

"../vue-router.js"

>

<

/script>

const routes =

const router =

newvuerouter()

newvue(,

methods:

})this

.$router.

push(}

)// router.push('/')}}

})<

/script>

<

/body>

<

/html>

vue 程式設計式導航

可以直接使用建立a標籤來導航鏈結,我們也可以通過編寫 來實現,主要有下面4種寫法 字串 router.push home 物件 router.push 命名的路由 router.push 帶查詢引數,變成 register?plan private router.push 注意 如果提供了path,...

react router 程式設計式導航

還記得vue裡面的路由是怎麼寫的嗎?在vue裡面,路由需要 引入 例項化路由物件 定義規則 掛載到全域性 路由佔坑 在頁面中使用 vue裡面路由導航也有兩種方式 router link 是配合router view使用在頁面當中的 另一種是在函式被觸發的時候執行this.router.push 路由...

程式設計式路由導航

message.vue template div ul li v for message,index in messages key message.id router link to home message detail message.id router link button click p...