zoukankan      html  css  js  c++  java
  • Vue.js多页面项目中路由使用history模式的方法

    采用vue分页后,因为指向的是单个html文件,无法配置history模式的路由。通过搜索发现了historyApiFallback配置项,下面先写一下注意事项。

    1. router.js 和 this.$router.push 需要加上前缀如:path: '/index/hello-world',  

    2. vue.config.js 配置publicPath: '/' (坏处是打包后的html直接打开白屏)

    3.项目上线仍需要后台nigx重定向路由

    配置:const path = require('path')function resolve ( return path.join(__dirname, d}

    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'));
      },
      configureWebpack: {

        devServer: {

          historyApiFallback: {

          verbose: true,

          rewrites: [
            { from: /^/index/.*$/, to: '/index.html'},
            {from: /^/print/.*$/, to: '/print.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
      }
    ]
  • 相关阅读:
    安装Hadoop
    爬虫综合大作业
    爬取全部校园新闻
    理解爬虫原理
    中文词频统计与词云生成
    复合数据类型,英文词频统计
    字符串操作、文件操作,英文词频统计预处理
    了解大数据的特点、来源与数据呈现方式
    大数据应用期末总评
    分布式文件系统HDFS 练习
  • 原文地址:https://www.cnblogs.com/hjsblogs/p/13901969.html
Copyright © 2011-2022 走看看