nginx配置

location / {
  root /webroot/www/ShopMall3;
try_files $uri $uri/ /index.html;
}

  /:访问路径;

  root:服务器文件路径

  你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

警告

给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})

Vue之八 HTML5 History模式的更多相关文章

  1. vue,一路走来(11)--HTML5 History模式

    HTML5 History模式 项目中我用的是history模式. 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不 ...

  2. 如何去除vue项目中的 # — vue路由的History模式

    前言 在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化为 #! 开头. 添加 mode: 'history' 之后将使用 HTML5 his ...

  3. nginx 配置支持URL HTML5 History 模式 与 设置代理

    拾人牙慧:https://segmentfault.com/q/1010000007140360 nginx 配置支持URL HTML5 History 模式 location / { try_fil ...

  4. Vue HTML5 History 模式

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  5. HTML5 History 模式

    vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  6. vue react 路由history模式刷新404问题解决方案

    vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...

  7. 每天一点点之vue框架开发 - History 模式下线上路由报404错误

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  8. vue-router HTML5 History 模式(转自官网)

    vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  9. Vue路由配置history模式

    我的博客: https://github.com/Daotin/fe-notes/issues vue需要node.js吗? 你可以用 script 标签的形式引入vue.min.js 这样的,不需要 ...

随机推荐

  1. 创建基于MailKit和MimeKit的.NET基础邮件服务

    邮件服务是一般的系统都会拥有和需要的功能,但是对于.NET项目来说,邮件服务的创建和使用会较为的麻烦..NET对于邮件功能提供了System.Net.Mail用于创建邮件服务,该基础服务提供邮件的基础 ...

  2. C++ string数据类型的实现

    #include <cstdlib> #include <cstring> class Mystring { public: Mystring(const char * pda ...

  3. Pandaboard ES编译bootloader、xloader、内核、以及安卓系统

    Building bootloader and kernel Bootloader Startwith building the bootloader. To learn more about the ...

  4. calendar中set方法和静态属性带来的坑

    坑在哪里: 在我之前接触的一个项目中涉及到这么一项功能:每天00:00:00把某些数据移动到mongodb数据库的另一个集合中,也就是关系型数据库的表中.这个集合名是一个固定的名称加上当前的两个月前的 ...

  5. 错误代码: 1449 The user specified as a definer ('root'@'%') does not exist

    1. 错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:call analyse_use('20150501','20150601 ...

  6. E: 未发现软件包 install_flash_player_11_linux.x86_64.tar.gz

    1 错误描述 youhaidong@youhaidong:~$ sudo apt-get install install_flash_player_11_linux.x86_64.tar.gz 正在读 ...

  7. 使用WebApiClient请求和管理Restful Api

    前言 本篇文章的内容是WebApiClient应用说明篇,如果你没有了解过WebApiClient,可以先阅读以下相关文章: WebApi client 的面向切面编程 我来给.Net设计一款Http ...

  8. ASP.Net Core的Code Fist代码先行操作方法

    Asp.Net  core的Code Fist(代码先行)主要有以下几步: 1.创建实体类 2.创建数据库上下文 3.填加连接字符串 4.依赖注入 5.添加基架工具并执行初始迁移 6搭建模型的基本架构 ...

  9. java将字符串转换为指定的时间格式

    *String dateString = "18:31:43";    try {     Date date = new SimpleDateFormat("HH:mm ...

  10. python 生成器和迭代器有这篇就够了

    本节主要记录一下列表生成式,生成器和迭代器的知识点 列表生成器 首先举个例子 现在有个需求,看列表 [0,1,2,3,4,5,6,7,8,9],要求你把列表里面的每个值加1,你怎么实现呢? 方法一(简 ...