vue-router 默认 hash 模式,页面不会重新加载

用路由的 history 模式,利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

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

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

  1. //例,基于node的配置
  2. const http = require('http')
  3. const fs = require('fs')
  4. const httpPort =
  5.  
  6. http.createServer((req, res) => {
  7. fs.readFile('index.htm', 'utf-8', (err, content) => {
  8. if (err) {
  9. console.log('We cannot open 'index.htm' file.')
  10. }
  11.  
  12. res.writeHead(, {
  13. 'Content-Type': 'text/html; charset=utf-8'
  14. })
  15.  
  16. res.end(content)
  17. })
  18. }).listen(httpPort, () => {
  19. console.log('Server listening on: http://localhost:%s', httpPort)
  20. })

vue-router-9-HTML5 History 模式的更多相关文章

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

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

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

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

  3. Vue HTML5 History 模式

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

  4. vue项目的mode:history模式

    最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式, ...

  5. HTML5 History 模式

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

  6. 如何去除vue项目中的 # --- History模式

    来自:https://www.cnblogs.com/zhuzhenwei918/p/6892066.html 侵删 使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现 ...

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

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

  8. vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案

    项目背景 vue-cli生成的单页面项目,router使用history模式.产品会在公众号内使用,需要添加微信JSSDK,做分享相关配置. 遇到的问题 相关配置与JS接口安全域名都已经ok,发布后, ...

  9. Vue之八 HTML5 History模式

    nginx配置 location / { root /webroot/www/ShopMall3; try_files $uri $uri/ /index.html; } /:访问路径: root:服 ...

  10. 解决vue项目route使用history模式,tomcat部署刷新url 404问题

    在webapps/项目名 创建WEB-INF ,创建web.xml文件 文件内容如下: <?xml version="1.0" encoding="UTF-8&qu ...

随机推荐

  1. RPG游戏中如何判断敌人是否在玩家的攻击范围之内

    // 方式1:通过主角和场景中的所有敌人比较 private void AtkCondition1(float _range,float _angle) { // 搜索所有敌人列表(在动态创建敌人时生 ...

  2. [Spring] 04 Denpendency Injection

    DI Dependency Injection 依赖注入:从程序代码中移除依赖关系的一种设计模式. 这样就可以更容易地管理和测试应用程序. DI使我们的程序编码 loosely coupled.松耦合 ...

  3. MySQL Connector/J

    5.1 Developer Guide 1. MysQL为由Java语言编程的客户端程序提供连接:MySQL Connector/J,这是一个实现Java Database Connectivity( ...

  4. p1472 Cow Pedigrees

    用dp[i][j]记录i个点,组成深度恰好为j的方案数.arr[i][j]记录i个点,深度<=j的方案数.那么dp[i][j]只有i为奇数时不为0.而arr[i][j]等于dp[i][j]的前缀 ...

  5. windows如何简单安装mongodb

    windows如何安装mongodb 步骤: 1.下载地址 2.选择zip(解压版本) 3.压缩文件解压到  /D:盘 4.在 D:盘  下建一个 data文件夹,data下建 db文件夹:   D: ...

  6. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  7. Javascript的常见数据类型以及相应操作

    JavaScript概述 1 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织E ...

  8. python记录_day14 内置函数二 迭代 二分法

    一.匿名函数 形式: lambda 形参:返回值 lambda表示的是匿名函数. 不需要用def来声明, 一句话就可以声明出一个函数.匿名函数不是说一定没名字,而是他们的名字统一称为“lambda”, ...

  9. 廖雪峰网站:学习python函数—定义函数(二)

    def my_abs(x): if x >= 0: return x else: return -x print(my_abs(-99)) # 空函数 def nop(): pass # 参数检 ...

  10. ACM-选人问题(救济金发放)

    n(n<20)个人站成一圈,逆时针编号为1-n.有两个官员,A从1开始逆时针数,B从n开 始顺时针数.在每一轮中,官员A数k个就停下来,官员B数m个就停下来(注意有可能两个 官员停在同一个人上) ...