用vue实现spa
使用Vue实现SPA（单页应用）
Vue.js是一个渐进式框架，非常适合构建SPA。以下是实现SPA的核心步骤和关键代码示例。
安装Vue CLI
通过Vue CLI快速搭建项目结构：
npm install -g @vue/cli
vue create my-spa
cd my-spa配置路由
安装Vue Router并配置基本路由：
npm install vue-router在src/router/index.js中：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: () => import('../views/About.vue') }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router挂载路由
在main.js中初始化路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')创建视图组件
在src/views/目录下创建组件：
<!-- Home.vue -->
<template>
<div>Home Page</div>
</template>
<!-- About.vue -->
<template>
<div>About Page</div>
</template>添加路由视图
在App.vue中添加路由出口：
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</template>实现动态路由
支持参数传递的路由配置：
// router/index.js
{
path: '/user/:id',
component: () => import('../views/User.vue')
}在组件中获取参数：
<!-- User.vue -->
<template>
<div>User ID: {{ $route.params.id }}</div>
</template>添加导航守卫
实现路由权限控制：
// router/index.js
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else {
next()
}
})配置异步加载
使用懒加载提升性能：
{
path: '/dashboard',
component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard.vue')
}处理404页面
添加通配符路由：
{
path: '/:pathMatch(.*)*',
component: () => import('../views/NotFound.vue')
}状态管理（可选）
对于复杂SPA可引入Pinia：
npm install pinia在main.js中：
import { createPinia } from 'pinia'
app.use(createPinia())构建部署
生成生产环境代码：
npm run build部署时需配置服务器支持HTML5 History模式，例如Nginx：
location / {
try_files $uri $uri/ /index.html;
}
