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. 算法笔记--最大流和最小割 && 最小费用最大流 && 上下界网络流

    最大流: 给定指定的一个有向图,其中有两个特殊的点源S(Sources)和汇T(Sinks),每条边有指定的容量(Capacity),求满足条件的从S到T的最大流(MaxFlow). 最小割: 割是网 ...

  2. C#获取路径中最后一个文件夹的名字

    using System; using System.IO; namespace ConsoleApplication1 { class Program { static void Main(stri ...

  3. SQL SERVER 设置区别大小写

    表格中字段设置大小写: --查询时修改 select * from info where name collate Chinese_PRC_CS_AS_WS = 'lily'; --或者修改表对大小写 ...

  4. 一次dropzone体验

    对于前端,本人不是太擅长,对于当前的一些网上的样例,也许是习武悟性太差,不是太透,所以只能通过blog的方式记录下一些武功套路,便于以后查询使用 首先,我们需要知道这个武功适应的战场. 什么是drop ...

  5. anaconda安装tensorflow

    1.下载anaconda python3.5版本,Windows不支持python3.6,linux和mac支持python2.7和python3.3+ 2.创建环境   conda create - ...

  6. python基础之字符串以及切片等操作

    1.字符类型 1.整型 int  2. str 字符串 3.bool 布尔值 4.list 表格,常用于大量数据的存储 用[ ]表示  5.tuple 元祖 ,不能发生改变()表示  6.dict 字 ...

  7. laravel项目数据库交互逻辑

    一般在获取数据库数据的时候,我们会使用get().或者first()来获取数据,但是在做一个项目的时候我使用了first()->toArray(),然后就报错了,鉴于此就好好的研究了get和fi ...

  8. PTA L2-002 链表去重

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805072641245184 第一次做链表题,有时间多看看 解释 ...

  9. 有史以来性价比最高最让人感动的一次数据库&amp;SQL优化(DB &amp; SQL TUNING)——半小时性能提升千倍

    昨天,一个客户现场人员急急忙忙打电话找我,说需要帮忙调优系统,因为经常给他们干活,所以,也就没多说什么,先了解情况,据他们说,就是他们的系统最近才出现了明显的反应迟钝问题,他们的那个系统我很了解,软硬 ...

  10. Django之路由分配系统

    前言: Django大致工作流程 1.客户端发送请求(get/post)经过web服务器.Django中间件. 到达路由分配系统 2.路由分配系统根据提取 request中携带的的url路径(path ...