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

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

首先，確保你的項目中已安裝并配置了Vue Router。一個基本的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)的方法實現(xiàn)跳轉(zhuǎn)

模板部分

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

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

腳本部分

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

使用params傳遞參數(shù)

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

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

注意，使用params時，接收參數(shù)需要在目標組件的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時，可以通過this.$route.query.contractNo獲取參數(shù)值。

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

接收params

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

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

接收query

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

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

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

到此這篇關(guān)于Vues中使用JavaScript實現(xiàn)路由跳轉(zhuǎn)詳解的文章就介紹到這了,更多相關(guān)Vue JavaScript路由跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論