在Vue應(yīng)用中，利用Vue Router進(jìn)行頁面間的導(dǎo)航是一個(gè)常見需求。本篇博客將通過示例代碼詳細(xì)介紹如何在Vue組件中使用JavaScript實(shí)現(xiàn)路由跳轉(zhuǎn)，包括傳遞參數(shù)的兩種方式：通過params和query。讓我們一步步深入了解。

基礎(chǔ)設(shè)置

首先，確保你的項(xiàng)目中已安裝并配置了Vue Router。一個(gè)基本的Vue Router配置可能如下所示（在router/index.js文件中）：

import Vue from 'vue'
import Router from 'vue-router'
import Seq from '@/components/Seq'Vue.use(Router)export default new Router({routes: [{path: '/rd/proj/seq',name: 'Seq',component: Seq},// 其他路由配置...]
})

使用模板內(nèi)的方法實(shí)現(xiàn)跳轉(zhuǎn)

模板部分

在Vue組件的模板中，你可以定義一個(gè)按鈕，其點(diǎn)擊事件會(huì)觸發(fā)一個(gè)函數(shù)來執(zhí)行路由跳轉(zhuǎn)。

<template><div><button @click="navigateToSeq">跳轉(zhuǎn)到Seq頁面</button></div>
</template>

腳本部分

在腳本部分，我們定義navigateToSeq方法來使用this.$router.push進(jìn)行路由跳轉(zhuǎn)。這里，我們將展示如何傳遞參數(shù)。

使用params傳遞參數(shù)

如果你希望在URL路徑中不顯示參數(shù)，可以使用params。

<script>
export default {methods: {navigateToSeq() {const row = { contractNo: '123' }; // 假設(shè)這是從某個(gè)地方獲取的數(shù)據(jù)this.$router.push({ name: 'Seq', params: { contractNo: row.contractNo } });}}
}
</script>

注意，使用params時(shí)，接收參數(shù)需要在目標(biāo)組件的beforeRouteUpdate鉤子或通過this.$route.params.contractNo訪問。

使用query傳遞參數(shù)

如果你想在URL中以查詢字符串的形式顯示參數(shù)，應(yīng)該使用query。

<script>
export default {methods: {navigateToSeq() {const row = { contractNo: '123' };this.$router.push({ path: '/rd/proj/seq', query: { contractNo: row.contractNo } });}}
}
</script>

使用query時(shí)，可以通過this.$route.query.contractNo獲取參數(shù)值。

在目標(biāo)組件中接收參數(shù)

接收params

對(duì)于通過params傳遞的參數(shù)，在目標(biāo)組件(Seq.vue)中，你可以在created或mounted生命周期鉤子，或者使用watch來監(jiān)聽$route的變化來獲取參數(shù)。

export default {created() {console.log(this.$route.params.contractNo); // 訪問通過params傳遞的合同編號(hào)}
}

接收query

對(duì)于query參數(shù)，獲取方式與params相同：

export default {created() {console.log(this.$route.query.contractNo); // 訪問通過query傳遞的合同編號(hào)}
}

通過上述步驟，你可以在Vue應(yīng)用中靈活地使用JavaScript實(shí)現(xiàn)頁面之間的路由跳轉(zhuǎn)及參數(shù)傳遞，無論是隱藏在URL中的參數(shù)還是直接展現(xiàn)在查詢字符串中的參數(shù)，都能輕松應(yīng)對(duì)。