0x0 VueRouter - 介绍 & 安装

Mottle
508 阅读6分钟

VueRouter 基础教程系列 🎉

什么是路由？

路由 (routing) 是一个动词，主要用于工程技术领域，其定义是：

通过互联的网络把信息从源地址传输到目的地址的活动。 —— wiki/路由

路由在软件领域的应用最早源于服务端，客户端浏览器通过发送 HTTP 请求到服务端，服务端根据请求地址来执行相应的映射函数。如果请求的是一个静态资源，则执行文件读写操作；如果请求的是动态资源（动态数据）那么则执行数据库的读写操作。

早期的 MPA 应用就是将以上方式进行混合使用的典范，通过加载静态资源的模板，结合数据库中的动态数据，使用渲染器进行渲染，最后返回渲染完毕的页面内容（HTML 字符串）。

好处： 安全性好，SEO 好，爬虫发起一个请求，就可以得到完整的页面内容。 缺点： 加大服务器的压力，用户体验差（表单提交需要打开新窗口、页面跳转需要触发整个窗口的刷新）。

什么是前端路由？

前端路由是指在前端层面控制浏览器页面地址导航，并基于地址的变化，采用无刷新的方式更新页面内容。 通常基于前端路由实现的 Web 应用我们称之为 —— SPA应用。

好处： 用户体验性好，减轻了服务端压力（页面内容以及样式完全由前端生成，后端只需要提供动态数据的服务）。 缺点： 对 SEO 不友好（这是由 SPA 的本质（页面内容由 js 创建）以及搜索引擎的不够强大而导致的）。

SPA 依赖的技术关键点：

  • 使用 Ajax 实现灵活的 HTTP 请求。
  • 通过 hash 或者是 HTML5 history 模式实现无刷新无跳转的地址导航。

前端路由模式

  • hash 模式：兼容性好，但是 URL 地址不美观。
  • history 模式：兼容性不好，但是 URL 地址格式与普通页面地址完全一致。

前端路由都有什么框架？

  • Vue -> VueRouter
  • React - ReactRouter
  • Angular -> NgRouter
  • JavaScript -> page.js | director.js

HTML5 的 history 与 hash 模式

浏览器支持两种路由模式：

  • history 模式
  • hash 模式

hash 模式

hash 模式，则是在当前的 URL 地址尾部追加一个 # 开头的字符串标识，例如 #hash=1。其特点就是页面不会刷新，然后结合 hashchange 事件可以很容易的实现一个简单的前端路由功能。

<body>
    <a href="#hash=1">hash=1</a>
    <script>
        window.addEventListener('hashchange', (e) => {
            console.log(e);//HashChangeEvent
        })
    </script>
</body>

history 模式

history 模式是浏览器的默认路由方式、鲜明特点就是页面的地址 (path) 发生改变后，页面会重新刷新，然后发送 get 请求到后端。

随着 HTML5 的快速发展，现代浏览器对 history 模式进行了增强。为其扩展了 pushState(state, null, path) 与 replaceState(state, null, path) 两个方法。可以让 history 模式实现与 hash 模式相同的无刷新路由导航。并且支持用 popstate 事件来监听浏览器浏览的历史记录变化。比如通过 history.go()、history.forward() 、history.back() 等方法或者点击浏览器的前进、后退按钮等都会触发 popstate 事件。

唯一需要注意的就是 pushState() 与 replaceState() 方法并不会触发 popstate 事件，如果你需要像 hash 与 hashchange 那样来监听 state 的变更，那么一个比较好的办法就是重写 history API 的相关方法，然后用自定义事件去触发。


<body>
    <a href="javascript:toSub()">toSub</a>
    <script>
        function toSub() {
            history._pushState({ name: 'sub.html' }, null, 'sub.html');
        }

        history._pushState = function () {
            const event = new Event('pushState');
            event.arguments = arguments;
            history.pushState.apply(this, arguments);
            Object.freeze(event);
            window.dispatchEvent(event);
        }

        window.addEventListener('pushState', (e) => {
            console.log(e.arguments);
        })
    </script>
</body>

虽然 history 模式下前端可以通过 pushState 或 replaceState 方法实现无刷新的路由导航，但是当用户手动刷新了当前页面或者是重新打开无刷新的页面地址，就会产生一个 404 错误，原因很简单，纯前端实现的路由导航在后端没有与之匹配的路由配置，所以就会返回 404。

解决办法很简单，那就是让后端添加一个**“回退路由”**，对于匹配不到任何资源的 URL，总是提供应用程序的 index.html 页面，这样路由的功能又交回了前端去处理 —— （漂亮~ Pretty！）。

history 与 hash

  • hash 兼容性更好，history 稍差需要 HTML5 支持。
  • hash 路径格式不美观，SEO 支持存在问题，history 模式的格式与传统页面地址格式完全一致，更亲和 SEO。
  • hash 模式下相同的 hash 值不会触发 hashchange，也不会加入到历史记录栈中，所以为了解决这一问题，通常我们还会提供一个时间戳或者一个随机串。history 模式则没有这种问题。
  • hash 模式无需后端配置回退路由，history 模式则需要。

Vue 中的路由

在 Vue.js 基础中，我们已经了解一个 Vue 应用是由众多的组件组合而成的，是组件树嵌套的完整体现。那么 Vue 中的路由则是 Vue 组件与一段路由地址所建立的映射关系，来让 VueRouter 根据导航地址的变化，来渲染对应匹配的组件。

更直观的理解，你可以将 Vue 组件与浏览器的地址建立对应关系。

VueRouter 介绍

Vue Router 是 Vue.js 的官方路由库，它与 Vue.js 核心深度集成。

典型的例子，你可以通过路由配置向所映射的组件实例传入 props 数据。

Vue Router 更多强大的功能，包括：

  • 可嵌套的路由配置
  • 模块化、基于组件映射关系的路由配置。
  • 动态路由匹配
  • 路由参数、通配符、查询。
  • 全面的导航控制（声明式、命令式）
  • 自动激活 CSS 类的链接
  • 可定制的滚动行为。
  • HTML5 history 模式或 hash 模式。
  • 与 transition 结合使用，提供过渡效果。
  • 与 keep-alive 结合使用，提供路由组件的缓存。

VueRouter 安装

省略基本的 CDN 引入和 NPM 包的的安装。

Vue CLI

如果你有一个正在使用 Vue CLI (opens new window)的项目，你可以以项目插件的形式添加 Vue Router。

vue add router

注意，这会覆盖 App.vue 文件。

开发版本构建

总是能使用到最新的代码。

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
npm install
npm run build

将 vue-router.git 仓库中的最新代码克隆到我们本地项目的 node_modules 目录下的 vue-router 文件夹内。然后安装依赖，编译 VueRouter。

VueRouter 会使用 Rollup 编译代码并输出到 dist 目录中，不同版本代码的引入方式，可以很清晰的通过 package.json 得到。

{
  "main": "dist/vue-router.common.js",
  "module": "dist/vue-router.esm.js",
  "unpkg": "dist/vue-router.js",
  "jsdelivr": "dist/vue-router.js",
}
avatar
文章
阅读
粉丝