vue实现spa
Vue 实现 SPA（单页应用）的方法
创建 Vue 项目
使用 Vue CLI 或 Vite 快速初始化项目，确保项目结构适合 SPA 开发。
npm init vue@latest my-spa
cd my-spa
npm install配置路由
安装 Vue Router 并配置路由规则，定义页面组件与路径的映射关系。
npm install vue-router在 src/router/index.js 中配置路由：
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;挂载路由到应用
在 main.js 中引入路由并挂载到 Vue 实例。
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');使用 <router-view> 和 <router-link>
在 App.vue 中通过 <router-view> 显示路由组件，用 <router-link> 导航。
<template>
<div>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view />
</div>
</template>动态路由与懒加载
支持动态路径参数和懒加载组件以优化性能。
// 动态路由
{ path: '/user/:id', component: () => import('../views/User.vue') }状态管理（可选）
对于复杂状态，可集成 Pinia 或 Vuex。
npm install pinia在 main.js 中配置：
import { createPinia } from 'pinia';
const pinia = createPinia();
app.use(pinia);部署配置
确保生产环境构建的静态文件能被服务器正确托管。
npm run build将生成的 dist 目录部署到 Web 服务器（如 Nginx 或 Apache），并配置所有路径重定向到 index.html。
示例 Nginx 配置
server {
location / {
try_files $uri $uri/ /index.html;
}
}
