Vue的 hash 模式与 history 模式

为了能够在改变视图的同时，不向后端发出网络请求。浏览器提供了 hash 模式与 history 模式。

而 vue 中的路由器就是利用了这两种模式，来实现前端路由的。

路由器的 hash 模式：

一、在 router 目录下的 index.js 文件中，通过 mode 属性配置 hash 模式。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  }
]

const router = new VueRouter({
  // 配置路由为 hash 模式
  mode: 'hash',
  routes
})

export default router

注：vue-router 默认使用的就是 hash 模式，所以以上的 mode: 'hash' 可以省略。

二、hash 模式的 URL 路径

 注：在 hash 模式中，URL 地址里有一个 # 号，# 号和后面的内容被称为 hash 值。

三、hash 模式向服务器发送请求：

 注：hash 值不会随着 URL 发送给服务器，只会被路由器解析。

路由器的 history 模式：

一、在 router 目录下的 index.js 文件中，通过 mode 属性配置 history 模式。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  }
]

const router = new VueRouter({
  // 配置路由为 history 模式
  mode: 'history',
  routes
})

export default router

二、history 模式的 URL 路径

 注：在 history 模式下，URL 地址更加干净、美观。

三、history 模式向服务器发送请求：

 

注：在 history 模式下，URL 地址会被完整的发送到服务器中。如果把项目打包部署到服务器上，刷新页面就会向服务器重新请求该路径的资源，但是服务器中并没有这个文件，就会报 404 的错误。

原创作者：吴小糖

创作时间：2023.8.3