Vue.js

外观

本页面内容

路由 ​

客户端路由与服务器端路由 ​

在服务器端进行路由意味着服务器根据用户访问的 URL 路径发送响应。当我们在一个传统的服务器端渲染的 Web 应用中点击链接时，浏览器从服务器接收 HTML 响应，并使用新的 HTML 重新加载整个页面。

然而，在单页应用程序 (SPA) 中，客户端 JavaScript 可以拦截导航，动态获取新数据，并在不进行完整页面重新加载的情况下更新当前页面。这通常会导致更流畅的用户体验，尤其是对于更类似于实际“应用程序”的使用场景，用户需要在长时间内执行许多交互。

在这种 SPAs 中，路由是在客户端，在浏览器中进行的。客户端路由器负责使用浏览器 API（如 History API 或 hashchange 事件）管理应用程序的渲染视图。

官方路由器 ​

Vue 非常适合构建单页应用程序。对于大多数单页应用程序，建议使用官方支持的 Vue Router 库。更多详情请参阅 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 上编辑此页面