程式設計式導航的基本使用

導航：

​ 乙個路由被執行一次，就是一次導航。導航可以分為宣告式導航和程式設計式導航。

宣告式導航：

​ router-link 可以編譯生成超連結按鈕，單擊按鈕就可以切換路由並顯示對應的元件，這個過程稱為「宣告式導航(靜態)」。

程式設計式導航：

​ 有時由於業務需要，乙個路由被切換執行並不方便通過宣告式導航實現，相反是要通過程式**的方式給實現出來，就是「程式設計式導航(動態)」。

程式設計式導航的實現：

路由物件.

push
(路由位址)
// 根據路由位址執行導航
路由物件.
back()
// 後退
路由物件.
forward()
// 前進
路由物件.
go(整型整數)
// 根據「整型數字」引數做路由的 前進(大於0)、重新整理(等於0)、後退(小於0) 操作

window.history.

go(負數|
0|正數)
window.history.
back()
window.history.
forward
()

main.js中，就是router在元件例項中 就是this.$router​ 在詳情頁面通過「程式設計式導航」，實現單擊「返回」按鈕回到列表頁面效果。

​ src/components/detail.vue具體實現：

>

>
>
@click
="$router.back()"
>
返回backbutton
>
p>
>
@click
="$router.go(-1)"
>
返回gobutton
>
p>
>
@click
="$router.push('/movie')"
>
返回pushbutton
>
p>
>
電影詳情展示-----}p
>
div>
template
>

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