之前讲过怎样将vue-cli创建的项目改造成多页面(vue-cli创建项目从单页面到多页面),今天说一下怎样在多页面的前提下使用history模式。

如何使用history模式

因为vue默认的hash模式的url有些丑,所以我们可以在路由的配置中添加如下配置:

   import Router from 'vue-router';
new Router({
mode: 'history' // 这样设置后,就可以去掉url中丑丑的“#”啦
});

但是如果只是这样使用的话,在本地开发时,有一个问题,那就是当你访问其他页面的时候,只能使用xxx/pagename.html 这种方式访问,而不是xxx/xxx2/xxx3等方式,直接刷新后,并不能定位到你预期的pagename.html,反而会定位到index.html(因为默认会定位到这里);

解决方案

在build/dev-sever.js中,我们可以通过connect-history-api-fallback 模块修改,修改方式如下:

// SPA应用浏览器回退支持配置

var rewrites = {
rewrites: [{
from: '/home/', // 正则或者字符串
to: '/home/index.html', // 字符串或者函数
}]
};
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')(rewrites));

官方使用文档见github:https://github.com/bripkens/connect-history-api-fallback

我的vue多页面系列的其他博客链接:

Vue-cli创建项目从单页面到多页面

Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下

Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理

Vue-cli创建项目从单页面到多页面2-history模式的更多相关文章

  1. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  2. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  3. vue/cli创建项目过程

            ①vue create demo    vue版本:3.9.3,node版本:12.8.0         ②Manually select features         ③Bab ...

  4. Vue-cli创建项目从单页面到多页面

    vue-cli创建项目从单页面到多页面 对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目. 需要修改以下几个文件: 1.下载依赖glob $npm i ...

  5. Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理

    前后端分离开发时,有时候会遇到跨域的情况:只在开发的时候存在跨域,项目上线后,由于配置的域名相同,跨域就会不存在. 这个时候,有两种方案可以比较快的解决: 1.利用h5的特性,使用cors,在ngni ...

  6. Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下

    关于将打包后的项目文件不放在根目录下 有时候,我们总是需要这样的设置:希望将打包后的文件放在a.b.com/somepath/这样一个路径下. 然而在vue-cli创建的项目中,默认的打包路径中的静态 ...

  7. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  8. 初学Vue.js,用 vue ui 创建项目会不会被鄙视

    全栈的自我修养: 6使用vue ui进行vue.js环境搭建 It is only with the heart that one can see rightly. What is essential ...

  9. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

随机推荐

  1. Object类—复写equals方法,hashCode方法,toString方法

    Object:所有类的根类. Object是不断抽取而来,具备着所有对象都具备的共性内容. class Person extends Object { private int age; Person( ...

  2. AspxGridView控件的使用

    在网上找到的不错的资料: http://www.lmwlove.com/ai/SubjectID6 以下是自我总结: 要实现的功能:使用AspxGridView显示Scott数据库中emp与dept两 ...

  3. JS前端三维地球渲染——中国各城市航空路线展示

    前言 我还从来没有写过有关纯JS的文章(上次的矢量瓦片展示除外,相对较简单.),自己也学习过JS.CSS等前端知识,了解JQuery.React等框架,但是自己艺术天分实在不过关,不太喜欢前端设计,比 ...

  4. vue 父组件传递子组件事件

    在开发中,碰到一个需要从父组件传入方法,子组件点击触发,说白了就是,把方法传入给子组件调用 <el-col v-for='data in spreadFormat.icons' class=&q ...

  5. Google Guava

    公司用到了 Joiner  HashMultimap 等  都是属于Google Guava包中的东西 官方文档 http://ifeve.com/google-guava/ 有时间了整理一下

  6. 2_认识STM32库

    2_认识STM32库 STM32库是由ST公司针对STM32提供的函数接口API,开发者可以调用这些函数接口来配置STM32的寄存器,使得开发人员得以脱离最底层的寄存器操作,开发快速. 库是架设在寄存 ...

  7. js返回到上一个页面刷新与不刷新的写法

    返回上个页面刷新: <script>window.location.href=document.referer</script> 返回上个页面不刷新 <script> ...

  8. Paint the Grid Again (隐藏建图+优先队列+拓扑排序)

    Leo has a grid with N × N cells. He wants to paint each cell with a specific color (either black or ...

  9. Surround the Trees(凸包)

    Surround the Trees Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  10. 第十一章 多GPU系统的CUDA C

    本章介绍了 显存和零拷贝内存的拷贝与计算对比 #include <stdio.h> #include "cuda_runtime.h" #include "d ...