vue 路由去掉url中的“#”

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

需求背景：

vue-router中默认使用的是hash模式，url中会带有“#”，例如“http://localhost:3000/#/”，

忽略url美观的问题，我们的开发中遇到一个问题，就是服务端会在url后面补充参数，我需要拿到这个参数获取信息。

但是有这个“#”，url就变成了“ www.a.com/aaaa?c=1&am…

客户端要用到params这个参数就拿不到了，如果想拿到就需要再处理一下“#”号，再有url上有个“#”也不太美观。

接下来就改了下vue-router的模式

export default new Router({
  mode: 'history',
  base:'/'//如果js和css跟html放在同级，这个也是要指定一下路径的。
})

改成‘history’模式，‘#’就去掉了，很开心。

然而打完包以后，页面是空白页。

然后又修改了下路径

把“assetsPublicPath”修改成你的js和css的路径，默认是“/”根路径，肯定是找不到资源的，也不会把资源放在根路径下。

我把js和css和图片这些静态资源放在cdn的，所以这个地方是一个绝对路径。所以router.js中的base去掉，

否则在router跳转的时候都会加上base设置的路径。

如“a.com”， 跳转 “a.com/aa”

如果base设置了值，比如“/dist”，那你的url就变成了“a.com/dist/aa”

至此前端需要配置的工作就已经做完了，接下来还需要你的服务端同事或者it同事设置一下ng

root /Users/qiilee/Desktop/vue/dist; 映射到172.20.x.x:128服务器。

至此就可以愉快的打开没有“#”号的url了。