快捷導(dǎo)航

vue多頁(yè)面項(xiàng)目中路由使用history模式的方法

更新時(shí)間：2019年09月23日 09:14:24 作者：Ming_Up

這篇文章主要介紹了vue多頁(yè)面項(xiàng)目中路由如何使用history模式，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前言

之前寫(xiě)了一個(gè)vue項(xiàng)目中需要添加一個(gè)打印的頁(yè)面，需要使用多頁(yè)面的模式進(jìn)行開(kāi)發(fā)，vue-cli3出初始化的項(xiàng)目配置多頁(yè)面還是很容易的，但是發(fā)現(xiàn)print.html沒(méi)有辦法配置history模式的路由，一旦使用history模式的路由。寫(xiě)了一個(gè)簡(jiǎn)單的demo在網(wǎng)上尋求幫助沒(méi)有能解決問(wèn)題，后來(lái)沒(méi)有辦法只能使用hash模式完整項(xiàng)目了。

如何解決

有一天看webpack文檔的時(shí)候，突然看到了historyApiFallback配置項(xiàng)，一瞬間感覺(jué)找到方法了。下班后回家就下載下之前的項(xiàng)目折騰了。

之前的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'}
        ]
      }
    }
  }

接下來(lái)啟動(dòng)項(xiàng)目去瀏覽器中驗(yàn)證，發(fā)現(xiàn)訪問(wèn) localhost:8080/print/hello 和 localhost:8080/index/hello-world 能夠分別訪問(wèn)到 print.html 和 index.html 頁(yè)面。但是不能進(jìn)入對(duì)應(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
  }
]

在瀏覽器中訪問(wèn)，可以了～～～

項(xiàng)目地址 github

總結(jié)

以上所述是小編給大家介紹的vue多頁(yè)面項(xiàng)目中路由使用history模式的方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: