vue实现spa
Vue 实现 SPA（单页应用）的步骤
创建 Vue 项目
使用 Vue CLI 快速初始化一个 Vue 项目，确保安装了 Vue Router 作为路由管理工具。运行以下命令创建项目：
vue create my-spa
cd my-spa
vue add 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创建视图组件
在 src/views 目录下创建页面组件（如 Home.vue 和 About.vue），每个组件对应一个路由路径。例如：
<template>
<div>
<h1>Home Page</h1>
</div>
</template>添加路由出口
在根组件 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>动态路由与懒加载
通过动态导入实现路由懒加载，优化首屏加载性能。修改路由配置：
const routes = [
{ path: '/', component: () => import('../views/Home.vue') },
{ path: '/about', component: () => import('../views/About.vue') }
]导航守卫
使用路由守卫处理全局逻辑（如权限验证）：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) next('/login')
else next()
})部署配置
在 vue.config.js 中设置 publicPath 为相对路径，确保部署到子目录时资源加载正常：
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/my-spa/' : '/'
}构建与优化
运行 npm run build 生成静态文件，部署到服务器。如需进一步优化，可配置代码分割和预加载：
const routes = [
{
path: '/',
component: () => import(/* webpackPrefetch: true */ '../views/Home.vue')
}
]
