在Vue應用程式中，我們經常需要在不同的HTML頁面之間進行跳躍。有時候我們需要攜帶參數進行跳轉，以滿足業務需求。本文將介紹如何在Vue應用中進行帶有參數的HTML頁面跳轉。
一、使用Vue Router
Vue Router是Vue.js官方的路由管理器，它可以非常方便地實現SPA應用的路由跳躍。在Vue應用中使用Vue Router可以輕鬆實現帶有參數的HTML頁面跳躍。
在使用Vue Router之前，需要先安裝它。可以透過npm安裝Vue Router，具體指令如下：
npm install vue-router --save
安裝完成後，在Vue專案中引入Vue Router，如下所示：
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router)
在使用Vue Router進行路由跳轉前，需要先設定路由。在Vue Router中設定路由很簡單，只需要在Vue實例中定義routes數組，每個元素都表示一個路由配置。例如：
const routes = [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/detail/:id',
name: 'detail',
component: Detail
}
]
const router = new Router({
routes,
mode: 'history'
})
export default router上面的程式碼定義了兩個路由配置。第一個路由對應路徑為"/home"，元件為Home；第二個路由對應路徑為"/detail/:id"，其中"id"是動態參數，元件為Detail。
在Vue Router中進行路由跳轉非常簡單。只需要使用router-link元件進行跳轉，或使用router.push方法編程式導覽。
在Vue元件的範本中使用router-link元件可以輕鬆地進行路由跳轉。例如：
<router-link :to="{name: 'detail', params: {id: 123}}">Show Detail</router-link>上面的程式碼中，使用了router-link元件進行路由跳轉，跳到名為"detail"的路由，並且攜帶參數"id"，值為123。
在Vue元件中使用router.push方法可以實作編程式導覽。例如：
this.$router.push({name: 'detail', params: {id: 123}})上面的程式碼中，使用了router.push方法進行路由跳轉，跳到名為"detail"的路由，並且攜帶參數"id"，值為123。
二、使用location.href
除了使用Vue Router進行路由跳轉，還可以使用原生的location.href進行跳轉。透過location.href實現路由跳轉時，需要手動拼接URL，且參數需要進行編碼處理。
使用location.href進行跳轉非常簡單。例如，我們要跳到名為"detail"的HTML頁面，並且攜帶參數"id"，值為123，可以如下所示：
location.href = '/detail.html?id=' + encodeURIComponent('123')上面的程式碼中，使用了encodeURIComponent方法對參數進行了編碼處理。這樣做是為了避免參數中包含特殊字符，導致跳轉URL格式錯誤。
當跳到帶有參數的HTML頁面後，我們需要從URL中取得參數，以便後續使用。在JavaScript中可以透過location.search取得URL中的參數部分。例如，假設我們跳到了名為"detail"的HTML頁面，且參數"id"的值為123，可以透過以下程式碼取得參數：
function getUrlParam(name) {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
const r = window.location.search.substr(1).match(reg)
if (r != null) {
return decodeURIComponent(r[2])
}
return null
}
const id = getUrlParam('id')
console.log(id) // 输出123上面的程式碼中，使用了RegExp和match方法取得帶參數的URL中的參數部分。使用decodeURIComponent方法對參數進行解碼處理，避免參數中包含特殊字元導致解析錯誤。
綜上，使用Vue Router進行路由跳轉是比較建議的方式。它可以更好地管理路由，跳轉更快速，同時也更符合Vue的MVVM想法。當然，我們也可以使用原生的location.href進行路由跳轉，但需要注意參數的編碼解碼問題。在實際開發中，需要根據實際情況選擇合適的方式。
以上是vue 跳轉html 帶參數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
