vue项目使用history路由

2019年12月29日22:38:36 发表评论 阅读(2,545)
本文最后更新于2019年12月29日,已超过一年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

vue项目使用history路由

官方说法

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

  1. const router = new VueRouter({
  2.   mode: 'history',
  3.   routes: [...]
  4. })

当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

后端配置

因为我的后端web服务是用的nginx,在这里只需要加上这样一段代码即可。

  1. location / {
  2.   try_files $uri $uri/ /index.html;
  3. }

 最后

重启nginx服务,测试通过,刷新再也不会出现404啦!

 

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛