当前位置：首页 > VUE

vue实现单页应用

2026-01-23 13:07:50VUE

Vue 实现单页应用（SPA）的核心方法

Vue.js 通过 Vue Router 和组件化开发实现单页应用。以下是具体实现步骤：

安装 Vue 和 Vue Router

通过 npm 或 yarn 安装必要依赖：

npm install vue vue-router

或使用 Vue CLI 快速搭建项目：

npm install -g @vue/cli
vue create my-spa-project

配置 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;

挂载路由到 Vue 实例

在 src/main.js 中初始化路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

定义路由视图

在 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>

动态路由与参数传递

通过 :id 定义动态路由：

// router/index.js
{
  path: '/user/:id',
  component: User,
  props: true // 将路由参数作为 props 传递
}

在组件中通过 props 接收参数：

// User.vue
export default {
  props: ['id']
}

导航守卫

使用全局前置守卫进行权限控制：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

异步组件与懒加载

通过动态导入实现路由懒加载：

const routes = [
  {
    path: '/dashboard',
    component: () => import('../views/Dashboard.vue')
  }
];

状态管理（可选）

复杂 SPA 可结合 Vuex/Pinia 管理全局状态：

vue实现单页应用

// 以 Pinia 为例
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({ name: '' }),
  actions: {
    setName(newName) {
      this.name = newName;
    }
  }
});