專門做淘寶優(yōu)惠券的網(wǎng)站醫(yī)院線上預(yù)約
在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ì)。