前端實現Vue組件頁面跳轉的多種方式小結

更新時間：2024年02月20日 10:07:26 作者：碼農研究僧

這篇文章主要為大家詳細介紹了前端實現Vue組件頁面跳轉的多種方式,文中的示例代碼講解詳細,具有一定的參考價值,有需要的小伙伴可以了解下

前言

通過某個Button讓頁面多種方式跳轉

1. 內嵌

想要在Vue應用中內嵌一個外部網頁，可以使用<iframe>標簽

下面是一個示例：

<template>
  <div>
    <!-- 在這里嵌入外部網頁 -->
    <iframe src="https://www.example.com" width="100%" height="500px" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  name: 'EmbeddedWebPage',
}
</script>

<style scoped>
/* 在這里添加樣式 */
</style>

<iframe>標簽的src屬性設置為要嵌入的外部網頁的URL

可以調整width和height屬性來設置iframe的大小
frameborder屬性用于設置是否顯示邊框，設置為"0"表示不顯示邊框

2. 跳轉新頁面

以下幾個Demo方式都不大一樣，可以細細品嘗

另外如果鏈接無法跳轉到外部鏈接，通常有以下幾個原因：

安全策略限制：瀏覽器的安全策略可能阻止了在某些情況下跳轉到外部鏈接，尤其是在一些網頁中加載了外部腳本或者使用了一些特定的安全設置時
Vue Router 攔截：如果 Vue 項目使用了 Vue Router，并且點擊的鏈接是一個標準的超鏈接（<a> 標簽），Vue Router 會嘗試攔截這個跳轉，并嘗試在單頁面應用中進行路由跳轉
為了避免這種情況，可以將鏈接設置為外部鏈接，并使用 target="_blank" 屬性來在新窗口中打開鏈接，這樣就不會被 Vue Router 攔截
路由模式設置：如果在 Vue Router 中使用了 history 模式，并且服務器端沒有正確配置，可能會導致在瀏覽器地址欄輸入外部鏈接時出現404錯誤
在這種情況下，需要確保服務器端已經正確配置了路由，以確保在直接訪問外部鏈接時能夠正確跳轉
瀏覽器插件或擴展：某些瀏覽器插件或擴展可能會干擾頁面的跳轉行為
可以嘗試在不同的瀏覽器或者在無插件的情況下測試鏈接是否正常跳轉

檢查這些問題可能會找到問題所在

2.1 Demo1

跳轉到新的頁面：

<template>
  <div>
    <!-- 使用 <a> 標簽跳轉到外部鏈接 -->
    <a  rel="external nofollow"  target="_blank">跳轉到外部鏈接</a>
  </div>
</template>

<script>
export default {
  name: 'RedirectPage',
}
</script>

<style scoped>
/* 在這里添加樣式 */
</style>

<a> 標簽的 href 屬性指定了外部鏈接的地址，比如 http://example.com
target="_blank" 屬性告訴瀏覽器在新的標簽頁或者窗口打開鏈接

這樣當用戶點擊鏈接時，瀏覽器會打開一個新的標簽頁或者窗口，并跳轉到指定的外部鏈接

不過這種方式需要雙擊最后才能繼續(xù)跳轉，有些雞肋，有沒有一步到位呢，也是有的！！

2.2 Demo2

想要實現直接跳轉到外部鏈接，而不需要用戶點擊鏈接的操作

可以在 Vue 組件的 mounted 生命周期鉤子函數中使用 JavaScript 來實現跳轉

<template>
  <div>
    <!-- 在頁面加載時立即跳轉到外部鏈接 -->
  </div>
</template>

<script>
export default {
  name: 'RedirectPage',
  mounted() {
    // 在組件掛載后立即跳轉到外部鏈接
    window.location.;
  }
}
</script>

<style scoped>
/* 在這里添加樣式 */
</style>

當 Vue 組件被掛載到頁面上后，mounted 生命周期鉤子函數會被調用

在這個鉤子函數中，使用 window.location.href 將頁面立即跳轉到指定的外部鏈接，比如 http://example.com。

這樣，當用戶訪問這個 Vue 組件所在的頁面時，頁面會立即跳轉到指定的外部鏈接，而不需要用戶進行任何點擊操作

2.3 Demo3

如果希望用戶返回上一個鏈接時停止跳轉，可以使用 JavaScript 的 history 對象來管理瀏覽器的歷史記錄，并在組件銷毀時清除添加的跳轉

<template>
  <div>
    <!-- 頁面內容 -->
  </div>
</template>

<script>
export default {
  name: 'RedirectPage',
  mounted() {
    // 在組件掛載后立即跳轉到外部鏈接
    this.redirectToExternalPage();
  },
  methods: {
    redirectToExternalPage() {
      // 跳轉到外部鏈接
      this.redirectHandler = setTimeout(() => {
        window.location.;
      }, 1000); // 1秒后跳轉，可根據需求調整
    }
  },
  beforeDestroy() {
    // 組件銷毀時清除跳轉操作
    if (this.redirectHandler) {
      clearTimeout(this.redirectHandler);
    }
  }
}
</script>

<style scoped>
/* 在這里添加樣式 */
</style>

使用了 setTimeout 函數來延遲跳轉到外部鏈接，以便用戶有時間返回上一個鏈接

可以根據需要調整延遲時間，特別是在組件銷毀時，使用 beforeDestroy 生命周期鉤子函數來清除跳轉操作，以防止在用戶返回上一個鏈接時繼續(xù)跳轉

3. 拓展

頁面不跳轉，甚至出現如下報錯：app.js:978 Error: Cannot find module './views/equipment/inner/tech-data/index.vue'

可能是因為文件路徑配置不正確或者文件確實不存在導致的

可以按照以下步驟檢查和解決問題：

確認文件路徑：確保在你的項目目錄中存在./views/equipment/inner/tech-data/index.vue文件?？梢允謩釉谖募到y(tǒng)中查找確認。
檢查文件名和路徑：確保在路由配置中使用的文件路徑與實際文件路徑一致。即確保在PageRouter或ViewsRouter中的路由配置中，component屬性的值指向了正確的文件路徑。
檢查文件導入：如果文件確實存在，那么可能是文件導入的問題
在確保文件路徑正確的前提下，檢查在PageRouter或ViewsRouter中導入組件的語句是否正確。確保導入路徑和實際文件路徑一致。
文件名大小寫：確保文件名的大小寫與實際文件名匹配。在某些操作系統(tǒng)中，文件名的大小寫是敏感的，因此確保在路由配置中使用的文件名與實際文件名大小寫一致。
重新安裝依賴：如果以上步驟都沒能解決問題，嘗試重新安裝項目的依賴
可以通過刪除node_modules文件夾并重新運行npm install來實現
檢查編譯過程：如果使用了構建工具如Webpack等，確保構建過程中能夠正確地解析和打包Vue組件