vue中2种路由方式(browserHistory 和 hashHistory。)

2019-3-5 20:44:25 255 views

区别:两者的区别简单来说是对路由方式的处理不一样

hashHistory

hashHistory 是以 # 后面的路径进行处理,通过 HTML 5 History 进行前端路由管理,

browserHistory

类似我们通常的页面访问路径,并没有 #,这里前端vue-router里面需要配置mode:history,线上环境需要服务端配置(配置在下面,否者会出现404),才能够访问指定的 url 都定向到当前页面,从而能够进行前端的路由管理。

browserHistory可能碰到的问题

如果你使用的是静态站点,那么使用 browserHistory 可能会无法访问你的应用,因为假设你访问 http://localhost:9527/dashboard,那么其实你的静态服务器并没有能够映射的文件,而使用 hashHistory 则不会有这个问题,因为它的页面路径是以 # 开始的,所有访问都在前端完成,如:http://localhost:9527/#/dashboard/。

服务端配置

Apache

需要修改router/index.js中new Router 配置,加一个base: '/vue/', 它指定应用的基路径,该应用是服务于localhost/vue路径下,所以必须加base配置,否则应用会展示 404 页面需要修改config/index.js中 build 下的assetsPublicPath: '/vue/',如果用相对路径,chunk 文件会报错找不到。修改httpd.conf文件,开启 rewrite_module 功能。LoadModule rewrite_module libexec/apache2/mod_rewrite.so,去掉前面的#。然后找到AllowOverride None的那行,把它改成AllowOverride All,来使.htaccess文件生效。在 apache 的www/vue 目录下新建.htaccess文件, 需要修改RewriteRule 为/vue/index.html, 否则刷新页面服务端会直接报 404 错误。

.htaccess 文件内容

 <IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

nginx伪静态

 location / {   try_files $uri $uri/ /index.html; } 

整合自 https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/deploy.html#%E5%8F%91%E5%B8%83

0

No Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。