vue实现spa案列
Vue 实现 SPA 案例
项目初始化
使用 Vue CLI 创建项目，确保已安装 Node.js 和 npm/yarn：
npm install -g @vue/cli
vue create vue-spa-demo
cd vue-spa-demo安装路由依赖
Vue Router 是构建 SPA 的核心工具：
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主入口文件
修改 src/main.js 引入路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')根组件模板
在 src/App.vue 中添加路由占位符和导航：
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>创建页面组件
在 src/views/ 目录下创建页面组件：
-
Home.vue:<template> <div>Welcome to Home Page</div> </template> -
About.vue:<template> <div>About Page Content</div> </template>
动态路由示例
在路由配置中添加带参数的路由：
{
path: '/user/:id',
component: () => import('../views/User.vue')
}在 User.vue 中获取参数：
export default {
computed: {
userId() {
return this.$route.params.id
}
}
}路由守卫
添加全局前置守卫控制访问权限：
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' ? '/your-project-name/' : '/'
}运行与构建
开发模式运行：
npm run serve生产环境构建：
npm run build关键点总结
- 路由配置通过
createRouter实现 <router-view>作为组件渲染出口<router-link>实现导航跳转- 动态路由通过冒号语法
:param定义 - 路由守卫控制导航逻辑
- 懒加载提升性能（
() => import()语法）
