vue多頁面項(xiàng)目中路由使用history模式的方法
前言
之前寫了一個(gè)vue項(xiàng)目中需要添加一個(gè)打印的頁面，需要使用多頁面的模式進(jìn)行開發(fā)，vue-cli3出初始化的項(xiàng)目配置多頁面還是很容易的，但是發(fā)現(xiàn)print.html沒有辦法配置history模式的路由，一旦使用history模式的路由。寫了一個(gè)簡(jiǎn)單的demo在網(wǎng)上尋求幫助沒有能解決問題，后來沒有辦法只能使用hash模式完整項(xiàng)目了。
如何解決
有一天看webpack文檔的時(shí)候，突然看到了historyApiFallback配置項(xiàng)，一瞬間感覺找到方法了。下班后回家就下載下之前的項(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'}
]
}
}
}
接下來啟動(dòng)項(xiàng)目去瀏覽器中驗(yàn)證，發(fā)現(xiàn)訪問 localhost:8080/print/hello 和 localhost:8080/index/hello-world 能夠分別訪問到 print.html 和 index.html 頁面。但是不能進(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
}
]
在瀏覽器中訪問，可以了～～～
項(xiàng)目地址 github
總結(jié)
以上所述是小編給大家介紹的vue多頁面項(xiàng)目中路由使用history模式的方法,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
springboot + vue+elementUI實(shí)現(xiàn)圖片上傳功能
文章描述了如何使用Element UI的el-upload組件實(shí)現(xiàn)前端圖片上傳,并將圖片存儲(chǔ)到后端數(shù)據(jù)庫(kù),同時(shí)在頁面上回顯上傳的圖片,后端通過接口接收?qǐng)D片,并將其存儲(chǔ)在指定位置,然后返回圖片路徑以便在前端顯示,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
vue+elementUI的select下拉框回顯為數(shù)字問題
這篇文章主要介紹了vue+elementUI的select下拉框回顯為數(shù)字問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
ElementUI中el-tree節(jié)點(diǎn)的操作的實(shí)現(xiàn)
這篇文章主要介紹了ElementUI中el-tree節(jié)點(diǎn)的操作的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
在Vue項(xiàng)目中實(shí)現(xiàn)文件下載有多種方式,包括使用window.open、<a>標(biāo)簽、axios、FetchAPI、自定義$download方法以及創(chuàng)建a標(biāo)簽等,每種方法都有其適用場(chǎng)景,開發(fā)者可以根據(jù)項(xiàng)目需求選擇最合適的方式2025-01-01
關(guān)于vue狀態(tài)過渡transition不起作用的原因解決
這篇文章主要介紹了關(guān)于vue狀態(tài)過渡transition不起作用的原因解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
關(guān)于Vue在ie10下空白頁的debug小結(jié)
這篇文章主要給大家介紹了關(guān)于Vue在ie10下空白頁的debug相關(guān)資料，這是最近在工作中遇到的一個(gè)問題，通過查找相關(guān)的資料終于解決了，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
使用Vue.js和MJML創(chuàng)建響應(yīng)式電子郵件
這篇文章主要介紹了使用Vue.js和MJML創(chuàng)建響應(yīng)式電子郵件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了Vue3請(qǐng)求攔截器里如何配置token,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue.js中,computed屬性根據(jù)依賴進(jìn)行緩存,只有依賴改變時(shí)才重新計(jì)算,這樣有效提高性能,computed屬性是響應(yīng)式的,可以自動(dòng)更新,并且默認(rèn)是只讀的,它與methods的主要區(qū)別在于計(jì)算屬性具有緩存性,而方法每次調(diào)用都會(huì)執(zhí)行,使用computed可以使模板更加簡(jiǎn)潔,提高應(yīng)用性能2024-09-09
本篇文章主要介紹了探索Vue高階組件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01