vue实现spa案列
Vue 实现 SPA 案例
创建 Vue 项目
使用 Vue CLI 快速初始化一个 Vue 项目，确保已安装 Node.js 和 npm。运行以下命令创建项目：
vue create vue-spa-demo选择默认配置或手动配置（推荐选择 Babel 和 Router）。
配置路由
在 src/router/index.js 中配置路由，确保已安装 vue-router。以下是一个基本的路由配置示例：
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;创建视图组件
在 src/views 目录下创建页面组件，例如 Home.vue 和 About.vue。以下是 Home.vue 的示例代码：
<template>
<div>
<h1>Home Page</h1>
<router-link to="/about">Go to About</router-link>
</div>
</template>挂载路由到应用
在 src/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');添加路由视图
在 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>运行项目
启动开发服务器，验证 SPA 功能是否正常：
npm run serve访问 http://localhost:8080，点击导航链接应能无刷新切换页面。
动态路由与懒加载
若需动态路由或懒加载组件，可修改路由配置：
const routes = [
{ path: '/', name: 'Home', component: () => import('../views/Home.vue') },
{ path: '/about', name: 'About', component: () => import('../views/About.vue') },
];处理 404 页面
添加通配符路由捕获未匹配路径：
{ path: '/:pathMatch(.*)*', component: () => import('../views/NotFound.vue') }导航守卫
使用导航守卫实现权限控制或页面跳转逻辑：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) next('/login');
else next();
});通过以上步骤，可快速实现一个基于 Vue 的 SPA 应用。根据需求扩展路由配置、组件功能或状态管理（如 Vuex/Pinia）即可。
