vue路由跳轉幾種方式

在Vue.js中，路由是一個非常重要的概念。它允許我們根據不同的URL位址來展示不同的內容。在Vue.js中，我們可以透過路由位址來存取不同的元件或頁面。在本文中，我們將介紹幾種Vue.js中路由跳轉的方式。

一、使用router-link元件實作路由跳轉

router-link是Vue.js內建的路由跳轉元件。它提供了一個標籤來訪問不同的鏈接，將URL地址傳遞給router-view組件來展示對應的頁面。我們可以在範本中使用router-link元件來實現頁面之間的跳轉。

下面是一個使用router-link元件跳到其他頁面的範例程式碼：

在上面的程式碼中，我們使用了兩個router-link元件。 to屬性用來指定跳轉的路由位址，例如to="/about"表示跳到關於我們頁面。當我們點擊標籤時，Vue.js會根據to屬性的值來匹配路由位址並展示對應的元件。

二、使用Vue.js中的編程式導航實作路由跳轉

除了使用router-link元件進行路由跳轉之外，Vue.js還提供了一個編程序導航的方式來進行路由跳轉。編程式導航是透過JavaScript程式碼來實現路由跳轉，它允許我們在程式碼中直接跳到指定的頁面。

下面是使用Vue.js中的編程式導航實作路由跳轉的範例程式碼：

在上面的程式碼中，我們使用了兩個按鈕來實現路由跳轉。當我們點擊按鈕時，呼叫goHome或goAbout方法實現路由跳轉。在Vue.js中，我們可以透過this.$router來存取路由對象，呼叫push()方法來實現路由跳轉。當我們呼叫push()方法並傳入目標路由位址時，Vue.js會自動匹配路由位址並展示對應的元件。

三、使用router.push()方法實作路由跳轉

除了使用$this.$router.push()方法實作路由跳轉之外，Vue.js也提供了一種router.push()方法的方式來進行路由跳轉。與$this.$router.push()方法相比，router.push()方法更加直接，可以讓我們更精細地控制路由跳轉的行為。

下面是使用router.push()方法實作路由跳轉的範例程式碼：

在上面的程式碼中，我們使用了router.push()方法來實現跳轉。我們可以傳遞一個字串或一個物件來指定目標路由位址。在上面的例子中，我們傳遞了一個物件來指定關於我們頁面的路由位址和名稱。