新增路由 vue html,VUE 项目刷新路由指向index.html

背景描述：

VUE 项目经过 npm run bulid 生成静态文件上传到服务器后，当我们切换路由并刷新页面，nginx 服务器会报 502 或者 404 错误。

原因分析：

我猜测是因为在 VUE 项目中，路由是利用H5的 history ，看起来页面 url 发生了变化，其实根本就在同一个页面。简而言之，除了根路由之外的路由并不是有效的 url，所以直接刷新页面并不能 get 到对应的内容。

解决方案：

通过 nginx 配置，让所有页面回到根路由。

location / {

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;

proxy_set_header Host $http_host;

proxy_set_header X-Nginx-Proxy true;

proxy_pass http://blogfront;

proxy_redirect off;

rewrite ^(.*)$ /index.html;

}

关于如何配置 nginx，可以参考这篇文章。

这里主要说一下最后一行，它表明在根路由下，所有页面路径都回到 /index.html。

vue项目中路由验证和相应拦截的使用

详解Vue路由钩子及应用场景(小结):https://www.jb51.net/article/127678.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/ ...

vue项目刷新当前页面

场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...

vue项目、路由

目录 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 js原型补充 vue项目生命周期 页面组件 配置自定义全局样式 路由逻辑跳转 路由重定向 组件的生命周期钩子 路由传参 ...

(转)vue项目刷新当前页面

场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...

vue项目的路由配置

方案一.在生成项目的时候就选择安装路由; 这个地方选择y即可; 生成项目之后在src目录下会有router文件夹,里面有index.js,并且里面已经存在一个helloWorld页面了,可以直接模仿着 ...

vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

vue项目实现路由按需加载的3种方式

vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...

vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

随机推荐

能力素质模型咨询工具(Part1)

之前写过由企业家基本素质想到的文章,里面提及一些能力与素质,以下有内容也可以参考: 领导职位 表6-1 远见卓识的行为表现 级 别 行 为 表 现 A (1)关注行业的前景和环境的变化, ...

在C#中，不安装Oracle客户端如何连接Oracle数据库

本方法优点: 1.程序内集成Oracle客户端,无需用户自行进行配置 本方法缺点: 2.增加程序包的体积(Oracle instant client本身有几十兆大小) 下面说一下如何实现. 0.首先, ...

html + css (1)

a{ text-decoration:none; /* 规定添加到文本的修饰;下划线没有了 */ margin:0px; font-size:15px; display: block; /* 以块级元 ...

十三、Android学习笔记_Andorid控件样式汇总

c语言学习之基础知识点介绍(十五)：函数的指针

一.函数的指针的介绍 /* 函数指针: 函数的指针,本质上一个指针 指向函数的指针,就是一个函数指针. 回忆:我们写的源代码编译成二进制的指令集,一串交给CPU执行的指令 先存在内存里面,然后CPU读 ...

java的类加载机制

1．概述 Class文件由类装载器装载后,在JVM中将形成一份描述Class结构的元信息对象,通过该元信息对象可以获知Class的结构信息:如构造函数,属性和方法等,Java允许用户借由这个Class ...

idea中去除重复代码提示的灰色波浪线

可以看到上面代码中的灰色波浪线,特别影响观感,可以看到是因为有了重复代码.不确定它是怎么确定重复代码的. 解决办法: Setting--Editor--Inspections--General---D ...

c语言中对于移位运算符的用法

//1 << 0 是把1 按2进制 左移0位,结果还是 1 ,2进制 0000 0001 //1 << 1, 是把1 按2进制 左移1位,结果是2,2进制 0000 0010 ...

POJ 3268 Bookshelf 2 动态规划法题解

Description Farmer John recently bought another bookshelf for the cow library, but the shelf is gett ...