JAVA高级面试进阶训练营视频教程

admin

vue-router官网https://router.vuejs.org/zh/guide/

vue的路由在默认的hash模式下,url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式（不带#号）也会有一些应用场景.

将路由配置成history模式，代码如下：

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }
    ]
})                    

由于vue-router 默认 hash 模式变为 history 模式，踩得坑还真有点多。

问题一：变为history模式，子路由在刷新情况下会出现样式变乱的情况，解决方法如下：

直接修改index.html文件中的静态文件引入路径就OK了

修改前：

<link rel="stylesheet" href="./static/css/base.css">

修改后：

<link rel="stylesheet" href="/static/css/base.css">

修改原理：

./ 是指用户所在的当前目录（相对路径）；

/ 是指根目录（绝对路径，项目根目录），也就是项目根目录；

对于hash模式，根路径是固定的，就是项目的根目录，但是history模式下，以 / 开头的嵌套路径会被当作根路径，所以使用“./”引入文件，就会找不到文件了，因为文件本身就是在项目根目录下的，并不在嵌套路径这个目录下。

总结，无论hash模式还是history模式，可以直接使用“/”从项目根目录引入静态文件。

更加详细的介绍https://www.cnblogs.com/xyyt/p/7718867.html

问题二：vue的路由在默认的hash模式下,默认打包一般不会有什么问题，而history模式打包后回出现页面一片空白的情况,而且没有资源加载错误的报错信息.

参考文章https://www.jb51.net/article/142831.htm

https://blog.csdn.net/g1531997389/article/details/79154179