vue-router-9-HTML5 History 模式
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 模式的更多相关文章
- vue,一路走来(11)--HTML5 History模式
HTML5 History模式 项目中我用的是history模式. 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不 ...
- nginx 配置支持URL HTML5 History 模式 与 设置代理
拾人牙慧:https://segmentfault.com/q/1010000007140360 nginx 配置支持URL HTML5 History 模式 location / { try_fil ...
- Vue HTML5 History 模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- vue项目的mode:history模式
最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式, ...
- HTML5 History 模式
vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- 如何去除vue项目中的 # --- History模式
来自:https://www.cnblogs.com/zhuzhenwei918/p/6892066.html 侵删 使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现 ...
- vue-router HTML5 History 模式(转自官网)
vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案
项目背景 vue-cli生成的单页面项目,router使用history模式.产品会在公众号内使用,需要添加微信JSSDK,做分享相关配置. 遇到的问题 相关配置与JS接口安全域名都已经ok,发布后, ...
- Vue之八 HTML5 History模式
nginx配置 location / { root /webroot/www/ShopMall3; try_files $uri $uri/ /index.html; } /:访问路径: root:服 ...
- 解决vue项目route使用history模式,tomcat部署刷新url 404问题
在webapps/项目名 创建WEB-INF ,创建web.xml文件 文件内容如下: <?xml version="1.0" encoding="UTF-8&qu ...
随机推荐
- C#读取text内容并且于testbox中展现 保留换行实现方法
直接上代码 //新建一个储存的list List<string> listLines = new List<string>(); StreamReader sr = new S ...
- 20170821xlVBA跨表公式套用
Public Sub CopyModelHideBlankRows() AppSettings Dim StartTime As Variant Dim UsedTime As Variant Sta ...
- Can't find kernel text map area from kcore
kernel : 4.9.51kexec-tools : 2.0.4 1.~ # ./kexec -p /boot/vmlinuz --initrd=/boot/initrd --command-li ...
- 架构探险笔记11-与Servlet API解耦
Servlet API解耦 为什么需要与Servlet API解耦 目前在Controller中是无法调用Servlet API的,因为无法获取Request与Response这类对象,我们必须在Di ...
- react中创建组件
第1种 - 创建组件的方式 > 使用构造函数来创建组件,如果要接收外界传递的数据,需要在 构造函数的参数列表中使用`props`来接收:> 必须要向外return一个合法的JSX创建的虚拟 ...
- python基础之 025 模块加载与import的使用
内容梗概: 1. 模块 2. import 3. from xxx import xxx 1.模块定义:模块就是一个包含了python定义和声明的文件,文件名就是模块的名字加上.py后缀.目前写的所有 ...
- Android实现选择题答题(包括单选、多选和答题卡)
在线答题demo,具体代码是一年多前完成的,比较简单,不再贴出,请参见Github. 主要功能: 单选:点击选项直接进入下一题.多选:选择多个选项,向右滑动进入下一题.答题卡:点击题号重新进入答题界面 ...
- mac使用迁移助理迁移数据之后homestead无法打开
1. 错误大致如下: here was an error while executing `VBoxManage`, a CLI used by Vagrant for controlling Vir ...
- xShell的简单操作记录
查看java进程: ps ux | grep java 显示当前所有java进程pid的命令:jps 将压缩文件从本地上传到服务器上:rz 打包成jar包:mvn clean package -Dma ...
- ubuntu Sublime Text 2编辑器安装
官网下载http://www.sublimetext.com/2 选择合适的包下载回来的格式是.tar.bz2格式,需要进行解压. 1,解压:tar -xvf Sublime\ Text\ 2.0.2 ...