vue实现spa应用
Vue 实现 SPA 应用的方法
创建 Vue 项目
使用 Vue CLI 快速初始化项目，确保已安装 Node.js 和 npm/yarn。运行以下命令创建项目：
vue create my-spa-app选择默认配置或手动配置（如 Babel、Router、Vuex 等）。完成后进入项目目录：
cd my-spa-app配置路由
安装 Vue Router（若创建时未选择）：
npm install vue-router在 src/router/index.js 中配置路由：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})挂载路由到 Vue 实例
修改 src/main.js，将路由实例注入 Vue：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')创建视图组件
在 src/views 目录下创建页面组件（如 Home.vue 和 About.vue）。示例 Home.vue：
<template>
<div>
<h1>Home Page</h1>
</div>
</template>添加路由导航
在 App.vue 中使用 <router-link> 和 <router-view>：
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>处理动态路由
通过冒号 : 定义动态路径参数：
routes: [
{ path: '/user/:id', component: User }
]在组件中通过 this.$route.params.id 获取参数。
启用 History 模式
避免 URL 中出现 #，需在路由配置中设置 mode: 'history'，并确保服务器端配置支持（如 Nginx 或 Apache 的 URL 重定向）。
打包部署
运行构建命令生成静态文件：
npm run build将 dist 目录部署到 Web 服务器（如 Nginx、Apache 或 CDN）。
注意事项
- 404 处理：History 模式下需配置服务器将所有路径重定向到
index.html。 - 懒加载：使用动态导入提升性能：
routes: [ { path: '/about', component: () => import('./views/About.vue') } ] - 导航守卫：通过
router.beforeEach实现权限控制或页面跳转逻辑。
