vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

hash模式带#号 不用配置服务器

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
mode: 'history',
routes: [...]
})

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问网址 就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

后端配置例子

配置官网都有

我这里用的是 nginx

成功

官网案例

Apache

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
除了 mod_rewrite,你也可以使用 FallbackResource

nginx

location / {
try_files $uri $uri/ /index.html;
}

原生 Node.js

const http = require('http')
const fs = require('fs')
const httpPort = 80 http.createServer((req, res) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
} res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
}) res.end(content)
})
}).listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort)
})

基于 Node.js 的 Express

对于 Node.js/Express,请考虑使用 connect-history-api-fallback 中间件

19、vue部署路由模式的更多相关文章

  1. vue切换路由模式{hash/history}

    vue中常用的路由模式 hash(#):默认路由模式 histroy(/)切换路由模式 切换路由模式 export default new Router({ // 路由模式:hash(默认),hist ...

  2. Vue history路由模式 apache配置上线

    1. 首先在vue项下的router.js 文件配置 mode为history模式,并且设置好对应的base选项 说明:base配置为你当前项目实际上线时所在的目录文件夹, 我这就是放在站点的根目录下 ...

  3. vue history路由模式 Nginx 生产实践

    nginx(带二级目录的配置) location ~* /A {    alias  /opt/nginx-1.4.7/html/ued/A;     try_files $uri $uri /A/s ...

  4. nginx反向代理部署vue项目(history模式)的方法

    前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理 问题1思考: vue-route ...

  5. vue 中的路由为什么 采用 hash 路由模式,而不是href超链接模式(Hypertext,Reference)?

    1. vue中路由模式的种类有两种 1. 一种是 hash 模式. 2. 一种是 h5 的 history 模式. 2. hash 和 history 都是来自 bom 对象 bom 来自 windo ...

  6. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  7. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

  8. vue react 路由history模式刷新404问题解决方案

    vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...

  9. Laravel+vue实现history模式URL可行方案

    项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...

随机推荐

  1. ELF文件之五——使用链接脚本-2个函数-data-bss

    main.c int enable; ; int main() { ; } int add() { ; } bss段在elf中虽然size是4,但并不占filesize,节头表如下图所示 程序头中,项 ...

  2. Shell脚本 一键重启

    有个程序必须用 kill -9 pid号   关闭后,才能重新启动,每次都要手动查找pid号,麻烦容易出错,写个shell脚本 就三行很方便,自动查找pid号-关闭程序-重启程序 #!/bin/bas ...

  3. 杭电------2097 Sky数(C语言写)

    //这个题没有一次过,哈哈哈哈,题意理解错了,开始还以为是必须加起来等于22呢 //其实就是依次算出个进制下的和,虽然每个循环最多循环四次,但是还是加上必要的判断,想办法让 //提前结束 #inclu ...

  4. Spring MVC系列之JDBC Demo(SpringBoot)(七)

    前言 前面我们了解了Spring MVC的基本使用,其实和.NET或.NET Core MVC无异,只是语法不同而已罢了,本节我们将和和数据库打交道,从最基础的JDBC讲解起,文中若有错误之处,还望指 ...

  5. C语言基础五 数组

    数组跟变量的区别? 数组是可以在内存中连续存储多个元素的结构,所有元素必须属于相同类型. 格式:元素类型 数组名[元素个数]: 数组的特点: 只能存放单一元素的数据,里面存放的数据成为元素. 数组的声 ...

  6. GO的方法值和方法表达式用法

    手册上关于这块的解释感觉不是很详细清晰,经过几个示例自己总结了下这块的用法. 方法表达式:说简单点,其实就是方法对象赋值给变量. 这里有两种使用方式: 1)方法值:隐式调用, struct实例获取方法 ...

  7. 「Spark」Spark SQL Thrift Server运行方式

    Spark SQL可以使用JDBC/ODBC或命令行接口充当分布式查询引擎.这种模式,用户或者应用程序可以直接与Spark SQL交互,以运行SQL查询,无需编写任何代码. Spark SQL提供两种 ...

  8. spring cloud微服务快速教程之(十) gateway 服务网关

    0.前言 gateway是spring的二代网关, 作为Netflix Zuul的替代者,是异步非阻塞网关 ,ZUUL2也是异步非阻塞的,但未纳入spring cloud整合计划 基于WebFlux  ...

  9. idea 普通项目 改成 maven项目

    首先 pom.xml 是必要的 然后在该文件上右击 add as maven project

  10. Python中关于日期的计算总结

    1.获取当前时间的两种方法: 代码如下: import datetime,timenow = time.strftime("%Y-%m-%d %H:%M:%S")print now ...