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. Django - 将URL映射到视图

    URLconf 就像是 Django 所支撑网站的目录.它的本质是 URL 模式以及要为该 URL 模式调用的视图函数之间的映射表.你就是以这种方式告诉 Django,对于这个 URL 调用这段代码, ...

  2. PHP curl是什么

    PHP curl是什么 一.总结 一句话总结:PHP支持的由Daniel Stenberg创建的libcurl库允许你与各种的服务器使用各种类型的协议进行连接和通讯. libcurl库 允许你与各种的 ...

  3. 雷林鹏分享: XML CDATA

    XML CDATA XML 文档中的所有文本均会被解析器解析. 只有 CDATA 区段中的文本会被解析器忽略. PCDATA - 被解析的字符数据 XML 解析器通常会解析 XML 文档中所有的文本. ...

  4. webpack+vue多入口环境搭建

    项目地址:https://pan.baidu.com/s/1c1Dflp2 使用前提:安装nodejs环境,webpack的配置官网的例子跟着跑一遍,会vue开发 研究webpack+vue研究了一个 ...

  5. js新打开页面

    var a = document.createElement("a"); a.setAttribute("href", href); a.setAttribut ...

  6. python记录_day16 类的成员

    一.变量 1.实例变量(又叫字段.属性) 创建对象时给对象赋值 形式: self.xxx = xxx 访问: 对象名.xxx     只能由对象访问 class Person: def __init_ ...

  7. mybatis使用@param("xxx")注解传参和不使用的区别

    public interface SystemParameterMapper { int deleteByPrimaryKey(Integer id); int insert(SystemParame ...

  8. 根据userAgent判断打开网页的所在终端,以及浏览器

    function _IsIOS() { var ua = navigator.userAgent.toLowerCase(); if(ua.match(/iPhone\sOS/i) == " ...

  9. 压力测试之ab命令

    网站性能压力测试是服务器网站性能调优过程中必不可缺少的一环.只有让服务器处在高压情况下,才能真正体现出软件.硬件等各种设置不当所暴露出的问题. ab是apache自带的压力测试工具.ab非常实用,它不 ...

  10. HTML标签(二)

    一.字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...