为了账号安全,请及时绑定邮箱和手机立即绑定

vue 路由去掉url中的“#”

vue-router中默认使用的是hash模式,url中会带有“#”,例如“http://localhost:3000/#/”,
这种情况我们遇到一个问题,就是服务端会在url后面补充参数,我需要拿到这个参数获取信息。

但是有这个“#”,url就变成了“ www.a.com/aaaa?c=1&b=2#&params=3”,客户端要用到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设置的路径。
如果“https://a.com”,调整“https://a.com/aa”
如果base设置了只,比如“/dist”,那你的url就变成了“https://a.com/dist/aa”

当然设置到这里还没有完,还需要你的服务端同事或者it同事设置一下ng

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

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

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消