Apache支持Vue router使用 HTML5History 模式
一、前言
前端Vue router 使用history模式,URL会比hash模式好看,这种模式要玩好,还需要后端配置支持,否则会报404错误。
注:1.前端代码省略。
2.此处后台使用Apache服务支持。
二、后端配置部署
1.创建一个txt文件,在其中添加如下配置
参照官方文档
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
更改文件名为: .htaccess (前面有个点)
把该文件放到和index.html同级

2.设置apache支持mod_rewrite
找到apache安装目录 etc/httpd/conf/ 下的 httpd.conf 文件
找到“LoadModule rewrite_module modules/mod_rewrite.so”,将前面的"#"号删除。
(如果没有找到,则新增一行,必须独占一行)

3.设置apache服务支持.htaccess
修改httpd.conf -> "AllowOverride None" 为 "AllowOverride All"

4.重启apache
命令:service httpd restart

Apache支持Vue router使用 HTML5History 模式的更多相关文章
- 「进阶篇」Vue Router 核心原理解析
前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue技术点整理-Vue Router
路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- 8. Vue - Router
一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...
随机推荐
- Cisco的互联网络操作系统IOS和安全设备管理器SDM__路由器软、硬件知识
路由器软.硬件知识 1.路由器的组件: 组件 解释 Bootstrap 存储在ROM中的微代码,bootstrap用于在初始化阶段启动路由器.它将启动路由器然后装入IOS POST(开机自检) 存储在 ...
- Flink-v1.12官方网站翻译-P019-Generating Watermarks
生成水印 在本节中,您将了解 Flink 提供的 API,用于处理事件时间时间戳和水印.关于事件时间.处理时间和摄取时间的介绍,请参考事件时间的介绍. 水印策略介绍 为了使用事件时间,Flink需要知 ...
- HBase和ElasticSearch索引类型及存储位置
本篇博文主要对HyperBase(HBase).Search(ElasticSearch)的索引类型及具体存储位置进行概要总结,让大家从整体上了解TDH平台中HyperBase和Search索引的管理 ...
- BZOJ 4516. [Sdoi2016]生成魔咒【SAM 动态维护不同子串数量】
[Sdoi2016]生成魔咒 动态维护不同子串的数量 想想如果只要查询一次要怎么做,那就是计算各个点的\(len[u]-len[link[u]]\)然后求和即可,现在要求动态更新,我们可以保存一个答案 ...
- 【noi 2.6_9285】盒子与小球之三(DP)
题意:有N个相同的球,M个不同的盒子,每个盒子最多放K个球.请计算将这N个球全部放入盒子中的方案数模1000007后的结果. 解法:f[i][j]表示i个盒子里放j个球的方案数. 1.得到3重循环的坐 ...
- tomacat服务器上web资源访问流程、web应用打成war包发布、Context的reloadable属性、tomacat体系架构
一.web资源访问流程 二.web应用打成war包发布到服务器 好处:打成war包发布到服务器,那么服务器会自动把它拆解成文件夹 jar命令是java自带的一个命令,如果之前配置过Java编译环境就可 ...
- 001、Python数据结构
#! usr/bin/env python # _*_ coding:utf-8 _*_ from random import randint ''' 一.list的增删改查 1.list.appen ...
- Kubernets二进制安装(2)之Bind9安装
1.修改主机名 hostnamectl set-hostname mfyxw10 hostnamectl set-hostname mfyxw20 hostnamectl set-hostname m ...
- ES索引Index相关操作&ES数据类型、字符串类型text和keyword区别
1.查看索引以及删除之前的测试索引 1. 查看索引以及索引数量信息 liqiang@root MINGW64 ~/Desktop $ curl -X GET http://127.0.0.1:9200 ...
- python--通过ocr对数据可视化视频还原为csv,进行简单的分析
见github https://github.com/TouwaErioH/Machine-Learning/tree/master/video/video 题目描述: source https:// ...