這篇文章給大家分享的是有關(guān)vue多頁面項目中路由如何使用history模式的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

田東ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

如何解決

有一天看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'));
  }
}

然后根據(jù) webpack文檔 ，添加了如下代碼：

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

接下來啟動項目去瀏覽器中驗證，發(fā)現(xiàn)訪問 localhost:8080/print/hello 和 localhost:8080/index/hello-world 能夠分別訪問到 print.html 和 index.html 頁面。但是不能進(jìn)入對應(yīng)的路由于是修改各自的路由文件，修改完后的路由分別為：

// 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
  }
]

感謝各位的閱讀！關(guān)于“vue多頁面項目中路由如何使用history模式”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文題目：vue多頁面項目中路由如何使用history模式-創(chuàng)新互聯(lián)
鏈接URL：http://weahome.cn/article/ccpdgd.html