vue多页面实现路由
vue多页面实现路由的方法
在Vue中实现多页面应用（MPA）路由，通常需要结合Webpack配置和Vue Router。以下是具体实现方式：
配置多入口Webpack
修改vue.config.js文件，为每个页面设置独立入口：
module.exports = {
pages: {
page1: {
entry: 'src/pages/page1/main.js',
template: 'public/index.html',
filename: 'page1.html'
},
page2: {
entry: 'src/pages/page2/main.js',
template: 'public/index.html',
filename: 'page2.html'
}
}
}为每个页面创建独立Vue实例
每个页面目录下需要包含完整的Vue应用结构：
src/pages/page1/
├── App.vue
├── main.js
└── router.js配置页面级路由
在每个页面的router.js中配置该页面专属路由：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})页面间跳转处理
使用常规HTML链接或window.location进行页面间跳转：
<a href="/page1.html">跳转页面1</a>
<a href="/page2.html">跳转页面2</a>开发环境配置调整
修改开发服务器配置以支持多页面访问：
devServer: {
historyApiFallback: {
rewrites: [
{ from: /\/page1/, to: '/page1.html' },
{ from: /\/page2/, to: '/page2.html' }
]
}
}生产环境构建优化
添加公共代码抽取配置减少重复打包：
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
}
}
}
}
}静态资源路径处理
确保静态资源路径正确：
publicPath: process.env.NODE_ENV === 'production'
? '/your-project-name/'
: '/'注意事项
每个页面都是独立的Vue应用，无法共享Vuex状态 页面间通信需要通过URL参数、localStorage或postMessage实现 需要考虑SEO优化时，建议使用预渲染或服务端渲染方案
