前端之history模式

前端之history模式

1.history模式

在vue-router中默认的路由模式采用的是hash模式,也就是 “#/路由地址”,而这里的"#“有可能会和项目当中的锚点地址冲突,如果我们启用history路由模式,就不会看到”#",只剩下"/路由地址",但是带来的新问题是客户端有路由地址,服务端也有路由地址,而且有可能出现重名的情况,例如:服务端有"/index"地址,客户端中也有"/index"地址,但是浏览器只要是看到不带"#"的地址就会发送给服务端.

2.解决方法

在服务器端配置重定向,如果发现来源的域名地址不是服务器端域名地址,只是相对路径想通,就会重新返回给浏览器

服务器地址	客户端路由
http://www.******.com/index	http://localhost:8080/index

当服务器接收到 http://localhost:8080/index 时就不在解析,而是返回给客户端浏览器
客户端：在vue脚手架中的router.js中或者是在router/index中配置为

配置方法

客户端

//  先引入vue-router
import VueRouter from 'vue-router';
//  配置启用history模式
const router = new VueRouter({
  mode: "history",
  routes
});
//  导出
export default router;

服务端(node.js):
1.安装一个支持history重定向的中间件(npm i -s connect-history-api-fallback)
2.在app.js中引入history模块

//  引入模块
var express = require("express");
var history = require("connect-history-api-fallback");
var app = express();
app.use(history());

注意: 重定向后,刷新页面会导致样式和图片都找不到

解决方法:

1.所有的图片和可以直接使用的第三方的js和css页面都放在public下
2.在唯一完整的index.html网页中引入public下的第三方js和css文件时必须以"/“开头,不能使用相对路径
3.所有的img的src属性必须以”/“开头,不能使用相对路径
4.所有通过服务器请求过来的img的src属性地址,如果不带”/“开头,需要先通过遍历或字符串拼接方式,把src值前拼接”/"

初次写如有不足还望多多指教,致谢!