vue-router 中mode，使用默认hash还是history模式？

傷城~ 2022-02-13 14:25 361阅读 0赞

[官网hsitory模式说明][hsitory]

vue-router中默认使用的是hash模式，也就是会出现如下的URL：  
![vue-router中hash模式][vue-router_hash]

[hash模式引起的问题][hash]  
[各个模式区别][Link 1]

## vue项目携带一个\#会对开发造成一定的影响： ##

1、微信三方登录回调地址，有\#号时，接收不到code参数

2、微信H5支付的回调地址，不允许有\#

3、App分享，处理特殊字符时，可能会对\#进行编译

4、有点影响美观

现在网站大多有三方登录，支付等功能，存在\#，项目开发就存在很大的障碍。话不多说，开始去掉\#吧。

## 去\#的原理 ##

vue把\#当做自己的根目录，静态资源，比如图片。

去掉\#后，要采用相对路径去引用，如果图片引用是在js内，则要采用require()方法进行引用。

去\#后台渲染，请参考[vue官方文档][vue]

## 如何去掉 ##

1、首先判断产线项目是否放在域名根目录下

在router/index.js文件中，添加history模式

如果项目不在根目录下，比如产线项目根目录为 `http://www.baidu.com/project-name/`

export default new Router({ 
      mode: 'history',
      base: '/project-name/', //如果项目根目录不为域名，则添加该行
      routes: [{ }]

2、修改config/index.js文件

build: { 
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/project-name/', //添加根目录，如果域名为根目录，则为 '/'
    }

这样子URL中的\#号就被去除了。

去掉\#，对项目的根目录造成影响，这是不可避免的，再次强调，确保静态资源文件路径正确。

## 修改为history需要后端配合 ##

Apache，Nginx等服务器部署vue项目请[参考][Link 2]

[hsitory]: https://router.vuejs.org/zh/guide/essentials/history-mode.html#html5-history-%E6%A8%A1%E5%BC%8F
[vue-router_hash]: /images/20220213/518595f007f5433599ecdf2bc8f71177.png
[hash]: https://blog.csdn.net/bocongbo/article/details/81670072
[Link 1]: https://blog.csdn.net/wang1006008051/article/details/81805932
[vue]: https://router.vuejs.org/zh/guide/essentials/history-mode.html
[Link 2]: https://blog.csdn.net/bocongbo/article/details/83957206