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 相关文章推荐
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
javascript中的this详解
Dec 08 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
深入了解js原型模式
May 30 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 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
社区(php&&mysql)四
2006/10/09 PHP
如何删除多级目录
2006/10/09 PHP
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
jQuery 1.0.2
2006/10/11 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
python第三方库学习笔记
2020/02/07 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
在职证明范本
2015/06/15 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
python面向对象版学生信息管理系统
2021/06/24 Python
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS