项目封装

# 一、基于 VueRouter 路由封装

对于单页面来说，页面路由就十分重要了，页面路由采用 Vue 全家桶中的 VueRouter，路由的实现本质上都是在 hash 和 H5 history 的基本 api 上的实现。这里记录以下基于 VueRouter 的路由封装。

# 1.VueRouter 封装

①.依赖安装

npm i vue-router -S

② 引入路由函数和哈希路由方式

import { createRouter, createWebHashHistory } from "vue-router";

③ 路由路径等配置

import Home from "./../components/Home.vue";
import Welcome from "./../components/Welcome.vue";
import Login from "./../components/Login.vue";

const routes = [
  {
    name: "home",
    path: "/",
    meta: {
      title: "首页",
    },
    component: Home,
    redirect: "/welcome",
    children: [
      {
        name: "welcome",
        path: "/welcome",
        meta: {
          title: "欢迎页",
        },
        component: Welcome,
      },
      {
        name: "login",
        path: "/login",
        meta: {
          title: "登陆页",
        },
        component: Login,
      },
    ],
  },
];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

④ 路由创建与导出

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

1
2
3
4
5
6

# 2. 路由跳转的三种方式

①router-link

<router-link to="/login">去登录</router-link>

② 传统跳转

<template>
  <el-button @click="goHome">回首页</el-button>
</template>

<script>
export default {
  name: "login",
  methods: {
    goHome() {
      this.$router.push("./welcome");
    },
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

③composition api 跳转

<script setup>
import { useRouter } from "vue-router";
let router = useRouter();
const goHome = () => {
  router.push("/welcome");
};
</script>

1
2
3
4
5
6
7

# 3. Vue 路由原理（hash 和 H5 history）

Vue 的单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的单页应用，是用一些超链接来实现页面切换和跳转。在 Vue-router 单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质，就是建立起 url 和页面之间的映射关系。

# Vue Router 实现原理

SPA 单页面特点：单一页面应用程序，只有一个完整页面；它在第一次加载页面时，就将唯一完整的 html 页面和所有其余页面组件一起下载下来，这样它在切换页面时，不会加载整个页面，而是只更新某个指定的容器中的内容。

SPA 单页面应用的核心是：更新视图而不重新请求页面。

路由对象底层实现的三大步骤：

监视地址栏变化；
查找当前路径对应的页面组件；
将找到的页面组件替换到router-view的位置。

Vue Router 在实现单页面前端路由时，提供了两种方式：Hash模式和 History 模式。

# Hash 模式

Hash 模式是使用 URL 的 hash 来模拟一个完整的 URL，当 URL 改变时，页面不会重新加载。hash（#）是 URL 的锚点，代表的只是页面的一个位置，单单改变#后面的部分，浏览器只会滚动到相应的位置，不会重新向服务器发起请求，http 请求中也不会包括#。

特点：

hash 改变不会重新加载页面，不会重新向服务端发起请求；（因为 hash 值不会包含在 http 请求中，它是指导浏览器动作的，对服务端完全无用）
#符号本身以及它后面的字符称之为 hash，可以通过window.location.hash属性读取；
每一次改变 hash，对会在浏览器的访问历史中增加一个记录；
可以为 hash 的改变添加监听事件（hashchange）；

根据这些特征，是使用原生的方法实现了一个简单的 Hash 路由 demo：hash-router (opens new window)。通过这个 demo 可以更好地理解 vue-router 中 hash 路由实现的思想了。

# History 模式

history 模式中 URL 不带#，它是利用 H5 history 中新增的 pushstate()和 replaceState()方法，将这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础上，它提供了对历史记录进行修改的功能。它的原理是利用这两个新增的方法虽然会更改地址栏 url，但浏览器不会向后端发送请求。

同时还有popstate事件，当同一个文档的浏览历史（history对象）出现变化时，就会触发popstate事件；但是仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮会前进按钮，或者使用JavaScript调用back、forward、go方法时候才会触发。

生产环境问题及解决：在生产环境下，将基于 history 项目部署到服务器之后，可以正常进行路由跳转，但是刷新页面后会 404，即请求不到资源，因为服务端并没有进行路由配置。

解决方式是：在服务端进行 nginx 代理转发，请求不到资源时候内部重定向项目首页，也就是单页面应用的同一个 index.html。

而为什么在开发环境下刷新没有遇到这个问题呢？因为在 vue-cli 中 webpack 帮我们做了处理。