一、前言

前端Vue router 使用history模式,URL会比hash模式好看,这种模式要玩好,还需要后端配置支持,否则会报404错误。

注:1.前端代码省略。

  2.此处后台使用Apache服务支持。

二、后端配置部署

1.创建一个txt文件,在其中添加如下配置

参照官方文档

  1. <IfModule mod_rewrite.c>
  2. RewriteEngine On
  3. RewriteBase /
  4. RewriteRule ^index\.html$ - [L]
  5. RewriteCond %{REQUEST_FILENAME} !-f
  6. RewriteCond %{REQUEST_FILENAME} !-d
  7. RewriteRule . /index.html [L]
  8. </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 模式的更多相关文章

  1. 「进阶篇」Vue Router 核心原理解析

    前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...

  2. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  3. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  4. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  5. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  6. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  7. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  8. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  9. 8. Vue - Router

    一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...

随机推荐

  1. (30)Linux文本处理

    1.cat命令:连接文件并打印输出到标准输出设备 cat 命令可以用来显示文本文件的内容(类似于 DOS 下的 type 命令),也可以把几个文件内容附加到另一个文件中,即连接合并文件. cat 命令 ...

  2. Linux下安装MySQL及远程连接MySQL

    安装方式一:通过下载官方安装包安装 由于Linux安装MySQL会遇到各种依赖问题,本博文整理了下安装方放,避免遇到依赖问题 查看是否自带mariadbrpm -qa|grep mariadb然后卸载 ...

  3. 用werkzeug实现一个简单的python web框架

    使用工具 Pycharm , Navicat , WebStorm等 使用库 Werkzeug用于实现框架的底层支撑,pymysql用于实现ORM,jinja2用于模板支持,json用于返回json数 ...

  4. 【noi 2.6_8471】切割回文(DP)

    题意:给一个字符串,问至少切割几次使每子串都是回文的. 解法:f[i]表示前i个字符至少需要切割几次,预处理p[i][j]表示子串s[i]~s[j]是否为回文串.O(n^2) 另外,这题也类似&quo ...

  5. Network UVA - 315 无向图找割点

    题意: 给你一个无向图,你需要找出来其中有几个割点 割点/割项: 1.u不为搜索起点,low[v]>=dfn[u] 2.u为搜索起点,size[ch]>=2 3.一般情况下,不建议在tar ...

  6. Revit二次开发环境配置(Revit 2020 +Visual Studio 2019)

    Revit二次开发环境搭建(Revit 2019+Visual Studio 2017)准备内容 Revit 2019开发环境的搭建,需要安装的内容如下: Revit 2019(主要的开发环境) Vi ...

  7. 继承自List<T>的类通过NewtonJson的序列化问题

    什么问题? NewtonSoft.Json是我们最常用的Json组件库之一了.这里来讨论下使用NewtonSoft.Json序列化List<T>子类的情景.序列化使用了类JsonSeria ...

  8. 被收费绘图工具 PUA 了怎么办?来看看这个老实工具吧

    本文非常适合 Electron 入门选手,墙裂推荐! 本文作者:HelloGitHub-蔡文心 大家好!这里是 HelloGitHub 推出的<讲解开源项目>系列,今天给大家带来的一款基于 ...

  9. Dubbo从入门到实践

    1 Dubbo出现的背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 我们传统的网站结构为 ...

  10. .Net Core 国际化

    创建项目什么的就不说了吧 直接进入正题吧 我这里建的是个webapi 添加资源文件 1.首先我们创建一个Language文件夹,这就是我们在后面Startup类中需要配置的目录名. 2.然后我们在La ...