Vue.js

外觀

本頁目錄

路由 ​

客戶端 vs. 服務端路由 ​

服務端路由指的是服務器根據用戶訪問的 URL 路徑返回不同的響應結果。當我們在一個傳統的服務端渲染的 web 應用中點擊一個鏈接時，瀏覽器會從服務端獲得全新的 HTML，然後重新加載整個頁面。

然而，在單頁面應用中，客戶端的 JavaScript 可以攔截頁面的跳轉請求，動態獲取新的數據，然後在無需重新加載的情況下更新當前頁面。這樣通常可以帶來更流暢的用戶體驗，尤其是在更偏向“應用”的場景下，因為這類場景下用戶通常會在很長的一段時間中做出多次交互。

在這類單頁應用中，“路由”是在客戶端執行的。一個客戶端路由器的職責就是利用諸如 History API 或是 hashchange 事件這樣的瀏覽器 API 來管理應用當前應該渲染的視圖。

官方路由 ​

Vue 很適合用來構建單頁面應用。對於大多數此類應用，都推薦使用官方支持的路由庫。要了解更多細節，請查看 Vue Router 的文檔。

從頭開始實現一個簡單的路由 ​

如果你只需要一個簡單的頁面路由，而不想為此引入一整個路由庫，你可以通過動態組件的方式，監聽瀏覽器 hashchange 事件或使用 History API 來更新當前組件。

下面是一個簡單的例子：

vue
<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'
const routes = {
  '/': Home,
  '/about': About
}
const currentPath = ref(window.location.hash)
window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})
const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>
<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>

在演練場中嘗試一下

vue
<script>
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'
const routes = {
  '/': Home,
  '/about': About
}
export default {
  data() {
    return {
      currentPath: window.location.hash
    }
  },
  computed: {
    currentView() {
      return routes[this.currentPath.slice(1) || '/'] || NotFound
    }
  },
  mounted() {
    window.addEventListener('hashchange', () => {
		  this.currentPath = window.location.hash
		})
  }
}
</script>
<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>

在演練場中嘗試一下

在 GitHub 上編輯此頁