Vue 脚本化路由实现与 HTML5 History API 应用

Vue 脚本化路由基础

起初认为 Vue 路由仅适用于工程化构建的项目，经研究证实，脚本化引入方式同样支持路由功能。无论采用何种集成方式，深入理解其底层原理才是关键。

一、 官网demo

官方文档对此描述较为简略，未明确区分具体使用场景，仅以少量代码概括，剩余细节需开发者自行探索，例如 HTML5 History API 的具体机制。这提示我们，要熟练运用 Vue，必须掌握相关前端基础知识，因为官方教程通常不涵盖这些底层常识。

参考官网提供的示例代码：

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
 '/': Home,
 '/about': About
}

new Vue({
 el: '#app',
 data: {
  currentRoute: window.location.pathname
 },
 computed: {
  ViewComponent () {
   return routes[this.currentRoute] || NotFound
  }
 },
 render (h) { return h(this.ViewComponent) }
})

代码结构看似简单，但理解其运作机制耗费了不少时间。其中仍有部分细节尚需厘清。

首先定义了三个常量变量，分别代表四个页面模板：404 错误页、首页（Home）和关于我们（About）。

接着定义路由规则，这是一个 JSON 对象，可视为实体类映射。Key 对应 URL 路径，Value 指向之前定义的页面组件常量。

随后创建 Vue 实例，需对应一个 DOM 元素（div）。data 中返回当前 URL 路径，ViewComponent 计算属性根据 currentRoute 动态返回对应的模板组件。

最后通过 render 函数实现 DOM 绑定，大致功能是挂载对应的视图组件。

基于上述逻辑，补充了一个页面交互示例。

 <body>
   <span onclick="myURL('/')">首页</span>
   <span onclick="myURL('/about')">关于</span>
   <div id="app"></div>
 </body>

运行网页后显示 Page not found 404，表明路由机制已生效。接下来需解决 Home 和 About 页面的切换显示问题。

二、HTML5 History API

首先补充 HTML5 History API 的相关知识，若已掌握可跳过此节。

HTML5 History API 允许开发者在不刷新整个页面的前提下修改站点 URL。该功能适用于局部加载页面内容，并通过改变 URL 来反映内容状态的场景。

使用 history.pushState(null, null, 'about') 可修改 URL，此操作仅改变地址栏显示而不向服务器发送请求，从而避免页面刷新，为执行 Vue 代码提供机会。

此时页面内容无变化，因为 Vue 是数据驱动的，仅改变 URL 而未更新数据。Vue 似乎未自动监听 URL 变化，或需特定方式监听。因此，我们先手动更新数据，再研究 Vue 的 URL 监听机制。

添加一行代码更新数据：route.currentRoute = window.location.pathname。

最后添加简单的导航功能，执行上述两行 JavaScript 代码即可实现路由切换。

<span onclick="myURL('/')">首页</span>
<span onclick="myURL('/about')">关于</span>

function myURL(name) {
    history.pushState(null, null, name);
    route.currentRoute = window.location.pathname;
}

三、按了F5怎么办？

按 F5 刷新页面时，若 URL 为 /about，浏览器会向服务器请求该路径，导致服务器返回 404 页面，因为服务器端并无此路由配置。目前的解决方案是修改服务器的 404 响应页面，例如在 IIS 中将 router.html 设置为默认 404 页面，这样 F5 刷新即可正常加载 Vue 应用。

此方法并非最佳实践，仅为临时解决方案，期待后续有更优方案。

该方式支持直接在浏览器地址栏输入 http://127.0.0.1:8000/about 并正常运行，只需确保 Vue.js 文件引用路径正确即可。

若地址栏输入 http://127.0.0.1:8000/aboutss，则会显示 Vue 设计的 404 模块。

然而，const About 模板的定义较为简单，难以支撑复杂应用。或许路由在工程化项目中才能发挥最大效能。

感谢大家的阅读和对本站的支持。