当前位置:网站首页>路由模式:hash和history模式
路由模式:hash和history模式
2022-07-02 13:10:00 【hyduan200】
hash 模式 url 里面永远带着#号,我们在开发当中默认使用这个模式。
如果用户考虑 url 的规范那么就需要使用 history 模式,因为 history 模式没有#号,是个正常的 url 适合推广宣传。
当然其功能也有区别,比如我们在开发 app 的时候有分享页面,那么这个分享出去的页面就是用 vue 或是 react
做的,咱们把这个页面分享到第三方的 app 里,有的 app 里面 url 是不允许带有#号的,所以要将#号去除那么就要使用 history 模式。
但是使用 history 模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现 404 错误,那么就需要和后端人配合让他配置一下 apache 或是 nginx 的 url 重定向,重定向到你的首页路由上就 ok 啦。
区别
hash | history |
---|---|
url 显示有#,很 Low | url 显示无#,好看 |
回车刷新 可以加载到 hash 值对应页 | 回车刷新一般就是 404 掉了 |
无需后端配置 | 需要后端配置 |
支持低版本浏览器和 IE | 浏览器 HTML5 新推出的 API |
hash模式的路由器
路由器默认的工作模式是hash模式,例如http://localhost:8080/#/demo
对于这种路由模式不需要多余的配置,具体如下:
router/index.js
import VueRouter from "vue-router";
import Demo from "@/views/demo";
const routers = [
{
path:"/demo",
component:Demo
}
]
const router = new VueRouter({
routes:[...routers]
})
export default router;
history模式的路由器
这种路由模式在项目中较为常见,例如http://localhost:8080/demo
对于这种路由模式前端及nginx都需要进行配置
router/index.js
import VueRouter from "vue-router";
import Demo from "@/views/demo";
const routers = [
{
path:"/demo",
component:Demo
}
]
const router = new VueRouter({
mode: 'history', // 修改为history路由
// base: '', // 为路由设置基础路径
routes:[...routers]
})
export default router;
常见bug
一:报错:Unexpected token ‘<‘ 错误解决方法
错误原因
引入的资源路径出错的问题
bug解决
方法一:调整路由模式;
方法二:不改路由模式,改配置文件:
1:修改部署应用包时的基本url,将绝对路径改为相对路径(或者不设置publicPath,默认就是相对路径)
:2: 修改vue.config.js,具体修改如下:
module.exports = {
publicPath: '/'
}
二:报错:We’re sorry but XXX doesn’t work properly without JavaScript enabled
错误原因
先检查请求的url是否正确,是否少或者多斜杠问题,例如http://localhost:3000/api/add 变为了 http://localhost:3000/api//add
bug解决
方法一:调整路由模式,改为hash路由;
方法二:publicPath: ‘/’
方法三:修改nginx具体如下:
location ^~ /api/ {
#api:后端服务代理路径(根据项目实际情况配置)
proxy_pass http://localhost:3000/; #后端服务真实地址
}
三:当路由模式为history路由时,刷新页面报404
错误原因
history路由模式下会请求到服务端,但服务端并没有这一个资源文件,所以就会返回404
bug解决
修改nginx配置
方案一如下:
location / {
root /usr/share/nginx/html/dist; # 存放dist
index index.html index.htm;
try_files $uri $uri/ /index.html; # 解决history路由页面刷新404问题
}
方案二如下:
location /{
root /usr/share/nginx/html/dist; # 存放dist
index index.html index.htm;
# 解决history路由页面刷新404问题
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
}
边栏推荐
- Summary of monthly report | list of major events of moonbeam in June
- [solution] educational codeforces round 82
- 构建多架构镜像的最佳实践
- Register as a harmonios developer and install deveco studio 3.0 beta2 for harmonios
- 2022 the latest and most detailed will successfully set the background image in vscade and solve unsupported problems at the same time
- PyC file decompile
- Win11应用商店无法加载页面怎么办?Win11商店无法加载页面
- [fluent] dart language (DART language features | JIT instant compilation | AOT static compilation)
- Storage, reading and writing of blood relationship data of Nepal Graph & Data Warehouse
- Original God 2.6 server download and installation tutorial
猜你喜欢
[fluent] dart data type string type (string definition | string splicing | string API call)
Recalling the college entrance examination and becoming a programmer, do you regret it?
Effectively use keywords to increase Amazon sales
Analyzing more than 7million R & D needs, it is found that these eight programming languages are the most needed in the industry!
Dimension table and fact table in data warehouse
[5g NR] RRC connection release
Summary | three coordinate systems in machine vision and their relationships
做机器视觉哪个软件好?
Huawei ECS installs mysqlb for mysqld service failed because the control process exited with error code. See “sys
[Yu Yue education] reference materials of sensing and intelligent control technology of Nanjing University of Technology
随机推荐
Some problems about MySQL installation
After the win10 system is upgraded for a period of time, the memory occupation is too high
Invalid bound statement (not found)解决方法总结
Another graduation season
[Xiaobai chat cloud] suggestions on container transformation of small and medium-sized enterprises
外企高管、连续创业者、瑜伽和滑雪高手,持续迭代重构的程序人生
请问怎么在oracle视图中使用stustr函数
What are the necessary functions of short video app development?
SQLServer查询哪些索引利用率低
Sim2real environment configuration tutorial
2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题
Mobile web development learning notes - Layout
Kubernetes family container housekeeper pod online Q & A?
[fluent] dart data type number type (DART file creation | num type | int type | double type | num related API)
又是一年毕业季
Sqlserver queries which indexes are underutilized
Boot 中bean配置覆盖
【5G NR】RRC连接释放
The median salary of TSMC's global employees is about 460000, and the CEO is about 8.99 million; Apple raised the price of iPhone in Japan; VIM 9.0 releases | geek headlines
idea jar包冲突排查