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

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

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

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

//例,基于node的配置
const http = require('http')
const fs = require('fs')
const httpPort = http.createServer((req, res) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open 'index.htm' file.')
} res.writeHead(, {
'Content-Type': 'text/html; charset=utf-8'
}) res.end(content)
})
}).listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort)
})

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. python中socket模块详解

    socket模块简介 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.socket通常被叫做"套接字",用于描述IP地址和端口,是一个通信 ...

  2. samtools faidx输出的fai文件格式解析 | fasta转bed | fasta to bed

    fai示例: Sc0000003 2774837 10024730 60 61 Sc0000004 2768176 12845826 60 61 Sc0000005 2756750 15660150 ...

  3. Confluence 6 教程:空间高手

    这个教程将会带你如何在 Confluence 中创建和自定义空间,同时也包括如何删除空间,如果需要的话.通过这个教程,你将成为使用空间的高手. 你需要具有创建空间(Create space)和创建个人 ...

  4. A strange lift HDU - 1548

    There is a strange lift.The lift can stop can at every floor as you want, and there is a number Ki(0 ...

  5. 【洛谷p1403 】【AHOI2005】约数研究

    (有种失踪人口回归的感觉) 约束研究[传送门] (不过好像没有人注意到我这个蒟蒻) 好的不管它啦 最近学数论比较多,所以可能会有好多好多的数论题???(不存在的) 行吧上算法标签: 数论   数论  ...

  6. Fox And Dinner CodeForces - 510E (最大流)

    大意: n只狐狸, 要求分成若干个环, 每个环的狐狸不少于三只, 相邻狐狸年龄和为素数. 狐狸年龄都>=2, 那么素数一定为奇数, 相邻必须是一奇一偶, 也就是一个二分图, 源点向奇数点连容量为 ...

  7. Vasya And The Mushrooms CodeForces - 1016C (前缀和模拟)

    大意: 给定2*n的矩阵, 每个格子有权值, 走到一个格子的贡献为之前走的步数*权值, 每个格子只能走一次, 求走完所有格子最大贡献. 沙茶模拟打了一个小时总算打出来了 #include <io ...

  8. D - Power Tower欧拉降幂公式

    题意:给你一个数组a,q次查询,每次l,r,要求 \(a_{l}^{a_{l+1}}^{a_{l+2}}...{a_r}\) 题解:由欧拉降幂可知,最多log次eu(m)肯定变1,那么直接暴力即可,还 ...

  9. Educational Codeforces Round 2 E - Lomsat gelral

    题意:每个节点有个值,求每个节点子树众数和 题解:可线段树合并,维护每个数出现次数和最大出现次数,以及最大出现次数的数的和 //#pragma GCC optimize(2) //#pragma GC ...

  10. js动态检测加载 JQ

    var jqcdnurl = 'https://cdn.bootcss.com/jquery/3.2.1/jquery.js'; //控制台输出 function log() { for (var i ...