Vue基础教程（165）Vue Router之HTML页面使用路由：拿捏Vue Router，让你切页面像德芙一样纵享丝滑

Vue Router入门：实现无刷新路由

原创

于 2025-10-05 06:11:41 发布 · 647 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #前端

一、开篇唠嗑：为啥我们需要路由？

想象一下这个场景：你正在一个电商网站快乐剁手，从首页点进一个商品详情页，网页“唰”地一下白屏，然后重新加载，你刚才滚动的位置、勾选的筛选条件全都没了……是不是瞬间想砸键盘？

传统多页面应用（MPA）就是这样，每次跳转都像是一次“重新投胎”，一切从头再来。而咱们Vue主导的单页面应用（SPA），追求的是一种“润物细无声”的高级感。整个应用就一个HTML页面，通过JavaScript动态地“切换”组件来模拟不同页面的效果。

这时候，Vue Router就闪亮登场了！它就像是咱们应用内部的超级导航系统或者超级大堂经理。你告诉它：“我要去‘商品详情页’（to ‘/product’）”，它立马心领神会，无缝地把对应的页面组件（比如 Product.vue）给你“请”到当前页面中来展示，同时浏览器地址栏的URL也会跟着变。整个过程没有白屏，没有刷新，数据和状态都保持原样，流畅得就像在用手机App一样！

所以，学好Vue Router，是你从“切图仔”迈向“前端工程师”的关键一步！

二、动手开搞：在普通HTML中引入Vue Router

很多教程一上来就是Vue CLI，对新手不太友好。咱们今天返璞归真，就在最纯粹的HTML文件里，通过CDN的方式把Vue Router“请”进来，让你看清它的本质。

第一步：搭建舞台——引入必要的JS库

要玩Vue Router，你得先有Vue和Vue Router本身。我们在HTML的<head>里把它们都安排上。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Router 丝滑体验馆</title>
    <!-- 1. 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 2. 引入 Vue Router 4 -->
    <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
    <style>
        /* 加点简单的样式，让页面不那么丑 */
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
        .nav { background: #f1f1f1; padding: 10px; margin-bottom: 20px; }
        .nav a { margin-right: 15px; text-decoration: none; color: #2c3e50; font-weight: bold; }
        .nav a.router-link-active { color: #42b983; } /* 当前活跃链接的样式 */
        .page-content { border: 1px solid #ddd; padding: 20px; min-height: 200px; }
    </style>
</head>
<body>
    <div id="app"></div>
    <script>
        // 所有魔法都将在这里发生！
    </script>
</body>
</html>

第二步：定义“演员”——创建我们的页面组件