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 ...
随机推荐
- Pytest(2)使用和调用方法
Pytest执行用例规则 Pytest在命令行中支持多种方式来运行和选择测试用例 1.对某个目录下所有的用例 pytest 2.对模块中进行测试 pytest test_mod.py 3.对文件夹进行 ...
- Linux下diff的操作详解
总述 Linux diff命令用于比较文件的差异.diff以逐行的方式,比较文本文件的异同处.特别是比较两个版本不同的文件,如果指定要比较目录,则diff会比较目录中相同文件名的文件,但不会比较其中子 ...
- Manthan, Codefest 19 (open for everyone, rated, Div. 1 + Div. 2) E. Let Them Slide(数据结构+差分)
题意:问你有n个长度总和为n的数组 你可以移动数组 但不能移出长度为w的矩形框 问你每一列的最大值是多少? 思路:只有一次询问 我们可以考虑差分来解决 然后对于每一行数组 我们可以用数据结构维护一下 ...
- 2018-2019 ACM-ICPC, NEERC, Southern Subregional Contest, Qualification Stage(11/12)
2018-2019 ACM-ICPC, NEERC, Southern Subregional Contest, Qualification Stage A. Coffee Break 排序之后优先队 ...
- Codeforces Round #533 (Div. 2) C. Ayoub and Lost Array(递推)
题意: 长为 n,由 l ~ r 中的数组成,其和模 3 为 0 的数组数目. 思路: dp[ i ][ j ] 为长为 i,模 3 为 j 的数组数目. #include <bits/stdc ...
- Educational Codeforces Round 88 (Rated for Div. 2) C. Mixing Water(数学/二分)
题目链接:https://codeforces.com/contest/1359/problem/C 题意 热水温度为 $h$,冷水温度为 $c\ (c < h)$,依次轮流取等杯的热冷水,问二 ...
- 神奇C语言的字串处理库函数
头文件:#incldue<string.h> 定义:strstr(str1,str2) 函数用于判断字符串str2是否是str1的子串.如果是,则该函数返回str2在str1中首次出现的地 ...
- hdu 6867 Tree 2020 Multi-University Training Contest 9 dfs+思维
题意: 给你一个由n个点,n-1条有向边构成的一颗树,1为根节点 下面会输入n-1个数,第i个数表示第i+1点的父节点.你可以去添加一条边(你添加的边也是有向边),然后找出来(x,y)这样的成对节点. ...
- AtCoder Beginner Contest 188 C - ABC Tournament (模拟)
题意:有\(2^n\)个人站成一排比赛,刚开始每个人都和自己右边的人进行比赛,赢得人晋级下一轮(下标的小的在前面),不断重复这个过程,问最后拿到第二名的人的编号. 题解:根据题意,可以用vector直 ...
- 要想用活Redis,Lua脚本是绕不过去的坎
前言 Redis 当中提供了许多重要的高级特性,比如发布与订阅,Lua 脚本等.Redis 当中也提供了自增的原子命令,但是假如我们需要同时执行好几个命令的同时又想让这些命令保持原子性,该怎么办呢?这 ...