简介

在单页面应用中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。

在这类单页应用中，“路由”是在客户端执行的。一个客户端路由器的职责就是利用诸如 History API 或是 hashchange 事件这样的浏览器 API 来管理应用当前应该渲染的视图。

示例

App.vue

<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
      <RouterLink :to="{ name: 'about' }">跳转 about</RouterLink>
      <RouterLink active-class="active" :to="{ path: '/home' }">
        Home
      </RouterLink>
      <button @click="jumpTo('/news')">新闻</button>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="App">
import { RouterLink, RouterView, useRouter } from "vue-router";
const router = useRouter();
function jumpTo(params: string) {
  router.push(params);
}
</script>

main.js

import router from "./router/index";
app.use(router);

app.mount("#app");

router/router.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "@/pages/Home.vue";
import News from "@/pages/News.vue";
import About from "@/pages/About.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/home",
      component: Home,
    },
    {
      name: "about"
      path: "/about",
      component: About,
    },
  ],
});
export default router;

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24