Vue的 hash 模式与 history 模式-阿里云开发者社区

Vue的 hash 模式与 history 模式

2023-08-29 265

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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

Vue的 hash 模式与 history 模式