用vue实现spa
Vue 实现 SPA（单页应用）的步骤
安装 Vue CLI
确保已安装 Node.js，通过以下命令安装 Vue CLI：
npm install -g @vue/cli创建 Vue 项目
使用 Vue CLI 初始化项目：
vue create my-spa选择默认配置或手动配置（推荐包含 Vue Router）。
安装 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;挂载路由到 Vue 实例
修改 src/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');创建视图组件
在 src/views/ 下创建页面组件（如 Home.vue 和 About.vue）：
<template>
<div>Home Page</div>
</template>使用路由占位符
在 src/App.vue 中添加 <router-view>：
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>运行项目
启动开发服务器：
npm run serve关键注意事项
- 路由模式：
createWebHistory需后端支持（避免 404 错误），也可用createWebHashHistory替代。 - 懒加载：优化性能时可动态导入组件：
{ path: '/about', component: () => import('../views/About.vue') } - 导航守卫：通过
router.beforeEach实现权限控制或页面跳转逻辑。
部署 SPA
- 构建生产环境代码：
npm run build - 将
dist目录部署到 Web 服务器（如 Nginx 或 Apache）。
