在Web開發中，常常需要在頁面中添加一些導航按鈕，以便用戶能夠更方便地瀏覽網站內容。Vue是一種流行的JavaScript框架，它提供了一種簡單的方法來創建這些導航按鈕，并在按鈕上添加點擊事件處理程序。在這篇文章中，我們將詳細介紹如何使用Vue來創建點擊按鈕，并在點擊時跳轉到其他頁面。
首先，我們需要為我們的按鈕創建一個Vue實例。我們可以使用Vue的構造函數來創建一個新實例。然后，我們需要在Vue實例中定義一個data屬性，該屬性將用于存儲我們要跳轉的頁面的URL。我們還需要定義一個方法，在方法中使用location.assign()來跳轉到我們定義的URL。
new Vue({
el: '#app',
data: {
url: 'http://example.com'
},
methods: {
goToUrl: function() {
location.assign(this.url);
}
}
});在上面的代碼中，我們創建了一個新的Vue實例，將其綁定到id為“app”的元素上。我們定義了一個data屬性url，其中包含我們要跳轉的頁面的URL。我們還定義了一個名為goToUrl的方法，該方法將在按鈕被點擊時調用。當該方法被調用時，它將使用location.assign()方法將URL分配給當前頁面，從而跳轉到我們指定的URL。
現在，我們需要將我們的Vue實例綁定到按鈕上，以便在按鈕被單擊時執行goToUrl方法。我們可以使用Vue的v-on指令來做到這一點。將v-on指令添加到按鈕元素上，指定它的事件類型為click，并將它的值設置為goToUrl方法的名稱。
注意，v-on指令使用縮寫語法@來代替。以下是使用@縮寫的完整代碼：
現在，當用戶單擊按鈕時，將調用goToUrl方法，該方法將使用location.assign()方法將用戶重定向到我們定義的URL。使用Vue的這種方法，可以輕松地添加按鈕和鏈接，從而提高用戶訪問網站的體驗。
下一篇vue點擊事件綁定