vue中的程式設計式和命名式導航

2021-08-20 16:17:34 字數 321 閱讀 1068

vue中路由的的方式有很多中程式設計式導航和命名式的寫法也算是比較簡單的

程式設計式如下

為了方便測試我寫在了methods裡面的方法裡面,在template中定義乙個按鈕執行方法

this.$router.push();
這種方法很方便只要在main.js中引入元件不用做其他的設定直接使用。

命名式導航

和程式設計式導航不同的是命名式導航需要在main.js中配置一下路由如下

,
vue檔案中和程式設計式路由定義乙個方法然後執行方法來跳轉

this.$router.push()

vue 程式設計式導航

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

vue 程式設計式導航

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

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

doctype html en utf 8 viewport content width device width,initial scale 1.0 x ua compatible content ie edge document title head 宣告式導航用在直接渲染到頁面 程式設計式導航...