路由模式：hash和history模式

hash 模式 url 里面永远带着#号，我们在开发当中默认使用这个模式。
如果用户考虑 url 的规范那么就需要使用 history 模式，因为 history 模式没有#号，是个正常的 url 适合推广宣传。
当然其功能也有区别，比如我们在开发 app 的时候有分享页面，那么这个分享出去的页面就是用 vue 或是 react
做的，咱们把这个页面分享到第三方的 app 里，有的 app 里面 url 是不允许带有#号的，所以要将#号去除那么就要使用 history 模式。
但是使用 history 模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现 404 错误，那么就需要和后端人配合让他配置一下 apache 或是 nginx 的 url 重定向，重定向到你的首页路由上就 ok 啦。

区别

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;

1
2
3
4
5
6
7
8
9
10
11
12
13

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

常见bug

一：报错：Unexpected token ‘＜‘ 错误解决方法

错误原因

引入的资源路径出错的问题

bug解决

方法一：调整路由模式；
方法二：不改路由模式，改配置文件：
1：修改部署应用包时的基本url，将绝对路径改为相对路径（或者不设置publicPath，默认就是相对路径）
:2： 修改vue.config.js，具体修改如下：

module.exports = {
  publicPath： '/'
}
1
2
3

二：报错：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/;  #后端服务真实地址
}
1
2
3

三：当路由模式为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问题
 }
1
2
3
4
5

方案二如下：

location /{
    root   /usr/share/nginx/html/dist;  # 存放dist
    index  index.html index.htm;
     # 解决history路由页面刷新404问题
    if (!-e $request_filename) {
        rewrite ^/(.*) /index.html last;
        break;
    }
}
1
2
3
4
5
6
7
8
9