vue多页面实现路由
实现多页面路由的基本概念
在Vue中实现多页面应用（MPA）需要配置多个入口文件，每个页面独立打包，拥有自己的路由系统。与单页面应用（SPA）不同，MPA的页面跳转通过传统链接或Vue Router的独立实例实现。
配置多页面入口
修改vue.config.js文件，配置多个入口。每个页面对应一个HTML文件、一个JavaScript入口文件和一个可选的Vue Router实例。
// vue.config.js
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html',
},
page2: {
entry: 'src/page2/main.js',
template: 'public/page2.html',
filename: 'page2.html',
},
},
});创建独立的路由实例
为每个页面创建独立的路由配置文件。例如，page2的路由配置：
// src/page2/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Page2Home from '../views/Home.vue';
const routes = [
{
path: '/page2',
name: 'Page2Home',
component: Page2Home,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;入口文件初始化路由
在每个页面的入口文件中初始化Vue应用并挂载路由：
// src/page2/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');处理页面间跳转
多页面间的跳转需使用传统<a>标签或window.location，因为Vue Router无法跨页面管理路由：
<!-- 在page1中跳转到page2 -->
<a href="/page2.html">Go to Page2</a>静态资源路径处理
确保静态资源路径正确，可在vue.config.js中设置publicPath：
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/your-project/' : '/',
};开发服务器配置
开发环境下需配置DevServer支持多页面访问：
// vue.config.js
devServer: {
historyApiFallback: {
rewrites: [
{ from: /\/page1/, to: '/page1.html' },
{ from: /\/page2/, to: '/page2.html' },
],
},
}构建优化
通过配置splitChunks避免公共模块重复打包：
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all',
},
},
}注意事项
- 多页面应用的路由是独立的，无法共享状态。
- 页面间通信需依赖URL参数、本地存储或全局事件总线。
- 生产环境部署时需确保服务器正确配置多HTML文件的访问规则。
