vue 程式設計式導航

2021-10-05 20:27:57 字數 1365 閱讀 8108

可以直接使用建立a標籤來導航鏈結，我們也可以通過編寫**來實現，主要有下面4種寫法

// 字串


router.push('home')


// 物件


router.push()


// 命名的路由


router.push(})


// 帶查詢引數，變成 /register?plan=private


router.push(})
注意：如果提供了path，params會被忽略，上述例子中的query並不屬於這種情況。取而代之的是下面例子的做法，你需要提供路由的name或手寫完整的帶有引數的path：

const userid = '123'


router.push( })   // -> /user/123


router.psuh(` })     // -> /user/123


//下面的寫法 params 不生效


router.push( })   // -> /user
同樣的規則也適用於 router-link 元件的 to 屬性。

注意： 如果目的地和當前路由相同，只有引數發生了改變 (比如從乙個使用者資料到另乙個/users/1->/users/2)，你需要使用beforerouteupdate來響應這個變化 (比如抓取使用者資訊)。

跟router.push很像，唯一的不同就是，它不會向 history 新增新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。

宣告式程式設計式

router.replace(...)

這個方法的引數是乙個整數，意思是在 history 記錄中向前或者後退多少步，類似window.history.go(n)

// 在瀏覽器記錄中前進一步，等同於 history.forward()


router.go(1)


// 後退一步記錄，等同於 history.back()


router.go(-1)


// 前進 3 步記錄


router.go(3)


// 如果 history 記錄不夠用，那就默默地失敗唄


router.go(-100)


router.go(100)
寫在結尾：文章借鑑vue router 官方文件，記錄平時學習的知識點，防止遺忘。

vue 程式設計式導航

命名的路由 這裡的name為路由中定義的name名稱 this.router.push 帶查詢引數，變成 register?plan private this.router.push 注意 如果提供了 path，params 會被忽略，上述例子中的 query 並不屬於這種情況。取而代之的是下面例子...

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...