手记

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了。

0人推荐
随时随地看视频
慕课网APP