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. 完全二叉树的节点个数 Count Complete Tree Nodes

    2018-09-25 16:36:25 问题描述: 问题求解: 单纯遍历了一遍,emmm,果然TLE. 解题思路就是比较左边树高度和右边树高度,如果相等,那么就是一个满二叉树,返回1 << ...

  2. Docker入门(CentOS7)

    1.docker安装yum -y install bash-completion     #tab键补齐包yum install net-tools -yyum -y install wgetwget ...

  3. Linux中sudo的用法

    一.用户在/etc/sudoers文件中的写法语法规则:授权用户 主机=命令动作 这三个要素缺一不可,但在动作之前也可以指定切换到特定用户下,在这里指定切换的用户要用括号括起来,如果不需要密码直接运行 ...

  4. BGP - 3,BGP重要概念(EBGP,IBGP,防环/黑洞/全互连/同步)

    1,防环/黑洞/同步/全互连(为出现大于号,现在通常都是要下一跳可达+关同步) a)EBGP邻居传来的路由可以通过AS_PATH防环,所以收到的不会有问题,因此直接是优化的(>),也就是直接装表 ...

  5. LeetCode--429--N叉树的层序遍历

    问题描述: 给定一个N叉树,返回其节点值的层序遍历. (即从左到右,逐层遍历). 例如,给定一个 3叉树 : 返回其层序遍历: [ [1], [3,2,4], [5,6] ] 说明: 树的深度不会超过 ...

  6. 在线linux 平台

    1.http://www.shiyanlou.com/[实验楼] 2.http://bellard.org/jslinux/[大牛平台]

  7. python记录_day23 正则表达式 re模块

    一. 正则表达式 使用python的re模块之前应该对正则表达式有一定的了解 正则表达式是对字符串操作的一种逻辑公式.我们一般使用正则表达式对字符串进行匹配和过滤. 正则的优缺点: 优点:灵活, 功能 ...

  8. windows远程以及文件共享方法总结

    文件共享部分 紧接着下一步[允许使用空密码] 参考这个链接 https://jingyan.baidu.com/article/7f766dafa8c5ee4100e1d071.html 在我们使用w ...

  9. 【微信公众号开发】【13】批量导出公众号所有用户信息到Excel

    前言: 1,一次拉取调用最多拉取10000个关注者的OpenID,当公众号关注者数量超过10000时,可通过填写next_openid的值,从而多次拉取列表的方式来满足需求 2,获取OpenID列表后 ...

  10. excel导入 导出

    PHP页面 //设置header header("content-Type:text/html;charset=utf-8"); //设置文件大小的限制 ini_set(" ...