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

前言

之前写了一个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文档 ,添加了如下365bet体育在线官网_365体育投注平台_365在线体育消息:

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模式的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

时间: 2019-09-23

vue-cli实现多页面多路由的示例365bet体育在线官网_365体育投注平台_365在线体育消息

项目下载地址 vue-cli多页面多路由项目示例:vue+webpack+vue-router+vuex+mock+axios Usage This is a project template for vue-cli. github上找到某大神的一个基于vue-cli模板的vueAdmin后台管理的模板,根据项目需求改成一个多页面多路由的vue项目. PC端:后台管理页面,单独的页面入口,单独的路由. 移动端:业务展示页面,单独的页面入口,单独的路由. 踩了无数的坑,终于是初见效果了,随后继续优

解决vue router使用 history 模式刷新后404问题

因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路

详解如何将 Vue-cli 改造成支持多页面的 history 模式

标题可能描述不准确, 大概就是这么个需求: 用 Vue-cli 搭建一个多入口, 多页面的站点, 也就是通过html-webpack-plugin插件会生成多个 .html 文件, 在默认下, 是只有 index.html 这个入口可以用 history 模式, 如: http://www.xxx.com/xxx/xxx, 而其他的入口只能用 hash 模式, 如: http://www.xxx.com/admin.html#/xxx/xxx, 因为webpack-dev-middleware会

详解Angular-cli生成组件修改css成less或sass的实例

详解Angular-cli生成组件修改css成less或sass的实例 使用cli命令生成组件: ng generate component 组件名 生成出来的组件文件有:html / ts / css / spec.ts 问题我是一个less重度患者怎么可能再去写css呢. 于是我就在想使用cli生成组件的时候能直接生成出来的是less文件而不是css文件: 修改angular-cli.json文件: apps "styles": [ "styles.less"

详解java调用存储过程并封装成map

详解java调用存储过程并封装成map 本文365bet体育在线官网_365体育投注平台_365在线体育消息中注释写的比较清楚不在单独说明,希望能帮助到大家, 实例365bet体育在线官网_365体育投注平台_365在线体育消息: public List<>> doCallProcedure(String procedureString,String[] parameters) throws PersistentDataOperationException { if (!isReady ()) { throw new PersistentDataOperatio

详解Webstorm 新建.vue文件支持高亮vue语法和es6语法

Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法,分享给大家,具体如下: 添加新建.vue文件功能 ①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击serch in repositories ②点击安装vue.js ③安装成功后点击右下角Apply 提示重启webstorm 重启完成后 Setting-Editor-File and Code Templates 点击右上角的加号 添加vue文件 Name为vue File, Exte

详解如何去除vue项目中的#——History模式

使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现#的出现真的很丑陋,并且也不知道这是什么作用? 所以就去Stack Overflow上搜索了,果然还有~? 看来Stack Overflow是真的强大,你在项目中遇到的问题实际上在so上都已经被问过并且解决了,这不: ? 这是最高票的回答,即在vue2中将mode模式设置为history,试过之后确实奏效! 但是知道这样可以解决问题,却不知道为什么,这是不行的, 随着连接,我们看到了文档. 所以这篇文章也就是引申到

详解webpack打包vue时提取css

webpack打包vue项目的时候默认会把vue里的css打包到页面上. webpack.config.js里的plugins加上以下配置 new webpack.LoaderOptionsPlugin({ test:/\.vue$/, options: { vue: { loaders: { css: ExtractTextPlugin.extract({ fallback:'vue-style-loader', use:'css-loader', publicPath:"../"

详解vue-cli多页面工程实践第1/2页

本文介绍了vue-cli多页面工程实践,分享给大家,具体如下: src目录结构 因为是自定义的设置,src下的目录结构需要固定,约定大于配置嘛. src目录结构: src/ components/ modules/ # 多页面 index/ # index 单页面 index.html main.js # 入口文件 page1/ index.html main.js group/ page2/ index.html main.js build中的配置 utils.js 增加: // match

详解如何在vue中使用sass

创建一个基于 webpack 模板的新项目 全局安装 vue-cli $ npm install --global vue-cli 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project 安装依赖 $ cd my-project $ npm install 为了使用sass,我们需要安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install

详解vue-validator(vue验证器)

官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 单独使用vue-validator的方法见官方文档,本文结合vue-router使用. 安装验证器 不添加自定义验证器或者无需全局使用的公用验证器,在main.js中安装验证器,使用 CommonJS 模块规范, 需要显式的使用 Vue.use() 安装验证器组件. import

详解从新建vue项目到引入组件Element的方法

本文介绍了从新建vue项目到引入组件Element以及Error when rendering component报错解决,分享给大家 一.新建项目 1.打开cmd,运行:vue init webpack Vue-Demo 2.运行:cd Vue-Demo进入这一级 3.运行:npm install 4.运行:npm run dev 如果浏览器打开之后,没有加载出页面,说明本地的8080 端口被占用,需要修改一下配置文件 config/index.js 解释:1.将 build 的路径前缀修改为

详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的365bet体育在线官网_365体育投注平台_365在线体育消息 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他365bet体育在线官网_365体育投注平台_365在线体育消息... resolve: { extensions: ['', '.js', '.vue'], fallback: [path.j