vue多页面项目中路由使用history模式的方法


Posted in Javascript onSeptember 23, 2019

前言

之前写了一个vue项目中需要添加一个打印的页面,需要使用多页面的模式进行开发,vue-cli3出初始化的项目配置多页面还是很容易的,但是发现print.html没有办法配置history模式的路由,一旦使用history模式的路由。写了一个简单的demo在网上寻求帮助没有能解决问题,后来没有办法只能使用hash模式完整项目了。

如何解决

有一天看webpack文档的时候,突然看到了historyApiFallback配置项,一瞬间感觉找到方法了。下班后回家就下载下之前的项目折腾了。

之前的vue.config.js中的配置是这样的,

const path = require('path')
function resolve (dir) {
 return path.join(__dirname, dir)
}
module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Index Page',
    },
    print: {
      entry: 'src/print/main.js',
      template: 'public/print.html',
      filename: 'print.html',
      title: 'print Page',
    }
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets',resolve('src/assets'))
      .set('components',resolve('src/components'));
  }
}

然后根据 webpack文档 ,添加了如下代码:

configureWebpack: {
    devServer: {
      historyApiFallback: {
        verbose: true,
        rewrites: [
          { from: /^\/index\/.*$/, to: '/index.html'},
          {from: /^\/print\/.*$/, to: '/print.html'}
        ]
      }
    }
  }

接下来启动项目去浏览器中验证,发现访问 localhost:8080/print/hello 和 localhost:8080/index/hello-world 能够分别访问到 print.html 和 index.html 页面。但是不能进入对应的路由于是修改各自的路由文件,修改完后的路由分别为:

// print
import HelloWold from '../components/HelloWorld'
import goBack from '../components/GoBack'
export default [
  
  {
    path: '/print/hello',
    name: 'print',
    component: HelloWold
  },
  {
    path: '/print/go-back',
    name: 'print',
    component: goBack
  }
]
// index
import HelloWold from '../components/HelloWorld.vue'
export default [
  {
    path: '/index/hello-world',
    name: 'hello-world',
    component: HelloWold
  }
]

在浏览器中访问,可以了~~~

项目地址 github

总结

以上所述是小编给大家介绍的vue多页面项目中路由使用history模式的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
JS随机密码生成算法
Sep 23 #Javascript
详解mpvue开发微信小程序基础知识
Sep 23 #Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 #Javascript
layui树形菜单动态遍历的例子
Sep 23 #Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 #Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 #Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 #Javascript
You might like
最小化数据传输――在客户端存储数据
2006/10/09 PHP
一个查看session内容的函数
2006/10/09 PHP
php str_replace的替换漏洞
2008/03/15 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
语义化 H1 标签
2008/01/14 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
django加载本地html的方法
2018/05/27 Python
python调用摄像头拍摄数据集
2019/06/01 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
python实现图像拼接
2020/03/05 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
python 模拟登陆github的示例
2020/12/04 Python
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
综合办公室主任职责
2013/12/16 职场文书
初中学校军训方案
2014/05/09 职场文书
党员干部一句话承诺
2014/05/30 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
龙猫观后感
2015/06/09 职场文书
小学生运动会广播
2015/08/19 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
汽车销售合同文本
2019/08/08 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python