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. Codeforces 934D - A Determined Cleanup

    934D - A Determined Cleanup 思路: 找规律,和k进制的求法差不多,答案的奇数位是p%k,偶数位如果p%k!=0,那么答案是k-p%k,否则为0. 代码: #include& ...

  2. 7.2内存管理-ARC

    @0-简介 1编译器会自动在适当的地方插入适当的retain.release.autorelease语句 @1-ARC的判断原则 1只要还有一个强指针变量指向对象,对象就会保持在内存中 2强指针   ...

  3. 差异基因分析:fold change(差异倍数), P-value(差异的显著性)

    在做基因表达分析时必然会要做差异分析(DE) DE的方法主要有两种: Fold change t-test fold change的意思是样本质检表达量的差异倍数,log2 fold change的意 ...

  4. 6月4 Smarty练习增删改

    练习Smarty的增删改所需要用到的数据库名称:timu,xuanxiang,kemu,nandu,leixing,然后使用smarty模板将前端后后台分割开来: 主页后台页面:zhupm.php & ...

  5. 转-【exp/imp】将US7ASCII字符集的dmp文件导入到ZHS16GBK字符集的数据库中

    原帖地址:http://blog.csdn.net/lihuarongaini/article/details/71512116 1.2  前言部分 1.2.1  导读和注意事项 各位技术爱好者,看完 ...

  6. Alibaba Java Coding Guidelines

    阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的<阿里巴巴Java开发规约>扫描插件!该插件由阿里巴巴P3C项目组研发.P3C是世界知名的反潜机,专门对付水下潜水艇,寓意是扫描出 ...

  7. [转载]Python3编码问题详解

    原文:Python3的编码问题 Python3 最重要的一项改进之一就是解决了 Python2 中字符串与字符编码遗留下来的这个大坑.Python 编码为什么那么蛋疼?已经介绍过 Python2 字符 ...

  8. InnoDB表空间、段、区

    1. 表空间是InnoDB存储引擎逻辑结构的最高层,所有的数据都存放在表空间中.默认,InnoDB存储引擎只有一个表空间ibdata1,即所有数据都存放在这个表空间内.如果用户启用了参数innodb_ ...

  9. leetcode Most Common Word——就是在考察自己实现split

    819. Most Common Word Given a paragraph and a list of banned words, return the most frequent word th ...

  10. 快速搭建springboot框架以及整合ssm+shiro+安装Rabbitmq和Erlang、Mysql下载与配置

    1.快速搭建springboot框架(在idea中): file–>new project–>Spring Initializr–>next–>然后一直下一步. 然后复制一下代 ...