vue项目地址栏自动加#

vue的路由在默认的hash模式下,url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式(不带#号)也会有一些应用场景.
1、将路由配置成history模式的方法:

配置路由模式,例如:
export default new Router({
  mode: 'history',
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }]
})
})
2、由于vue-router默认hash模式,有些后续问题需要处理

(1)变为history模式,子路由在刷新情况下会出现样式变乱的情况,解决方法是修改index.html文件中文件引入路径即可。
修改前:<link rel="stylesheet" href="./static/css/base.css">
修改后:<link rel="stylesheet" href="/static/css/base.css">

修改原理:

./ 是指用户所在的当前目录(相对路径);

/ 是指根目录(绝对路径,项目根目录),也就是项目根目录;

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

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

(2)vue的路由在默认hash的模式下,默认打包一般不会有什么问题,但history模式打包后可能出现页面一片空白的情况,而且没有错误信息
解决vue路由history模式打包后页面空白的解决方法

发布了45 篇原创文章 · 获赞 32 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 黑客帝国 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览