vue-router之hash与history，以及nginx配置

2023-10-16 15:06:18 浏览数 (2)

本篇讲解前端项目的路由模式（以vue-router为例），以及history模式下的项目部署问题。

vue-router的路由模式可以通过指定mode属性值控制，可选值："hash" 、"history"、 "abstract" ， 默认："hash" (浏览器环境) ， "abstract" (Node.js 环境)

代码语言：javascript复制
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

路由表里的兜底配置

hash与history

Hash模式

通过 onhashchange 方法监听hash的改变来实现

  • Hash模式是基于锚点，以及onhashchange事件
  • URL中#后面的内容作为路径地址
  • 监听hashchange事件
  • 根据当前路由地址找到对应组件重新渲染

History模式

通过 onpopstate 方法监听history的改变来实现

  • History模式是基于HTML5中的History API
  • 通过history.pushState()方法改变地址栏 IE 10 以后才支持
  • 监听popstate事件
  • history.replaceState()
  • 根据当前路由地址找到对应组件重新渲染

History模式的使用，以及nginx配置

  • History 需要服务器的支持
  • 单页应用中，服务端不存在http://www.testurl.com/login这样的地址，会返回找不到该页面
  • 在服务端应该除了静态资源外都返回单页应用的index.html，比如：http://www.testurl.com/login.html

history需要服务器支持，我们使用node或nginx http://localhost:8080/main/home

nginx处理方式

在nginx的html根目录部署一个项目，然后新开一个文件夹，部署另一个项目，nginx.conf

代码语言：javascript复制
location / {
  root    html;
  index   index.html index.htm;
  try_files $uri $uri/ /index.html
}

try_files：

  • $uri: 当前请求路由 这句话意思是尝试请求当前路由，如果请求不到，就返回当前目录下的index.html

nginx root 和 alias 的区别

代码语言：javascript复制
location  /i/ {
 alias   /spool/w3/images/;
}
# 


	


nginx hash history router 配置 




	






	

 0 人点赞