当前位置：首页 > VUE

vue项目怎么实现页面

2026-02-24 05:45:45VUE

创建Vue页面基础结构

使用Vue CLI或手动创建.vue单文件组件，包含<template>、<script>和<style>三个基本部分。例如：

<template>
  <div class="page-container">
    <h1>{{ pageTitle }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: '首页'
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
}
</style>

配置路由导航

安装Vue Router并配置路由文件（通常为router/index.js），将组件映射到特定路径：

import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomePage
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

动态路由与参数传递

通过冒号语法定义动态路由参数，在组件内通过$route.params或props接收：

vue项目怎么实现页面

// 路由配置
{
  path: '/user/:id',
  component: UserPage,
  props: true
}

// 组件内接收
export default {
  props: ['id']
}

页面布局与嵌套路由

使用<router-view>嵌套实现布局模板，父路由配置children属性：

// 父路由配置
{
  path: '/admin',
  component: AdminLayout,
  children: [
    { path: 'dashboard', component: Dashboard },
    { path: 'settings', component: Settings }
  ]
}

// 布局组件模板
<template>
  <div>
    <admin-sidebar/>
    <router-view/>
  </div>
</template>

页面过渡效果

通过Vue的过渡系统为路由切换添加动画：

vue项目怎么实现页面

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

页面状态管理

复杂页面状态建议使用Pinia进行管理：

// store/pageStore.js
import { defineStore } from 'pinia'

export const usePageStore = defineStore('page', {
  state: () => ({
    loading: false,
    error: null
  }),
  actions: {
    setLoading(status) {
      this.loading = status
    }
  }
})

// 组件内使用
import { usePageStore } from '@/stores/pageStore'
const pageStore = usePageStore()
pageStore.setLoading(true)

页面生命周期控制

利用路由守卫控制页面访问权限和数据处理：

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

// 组件内守卫
export default {
  beforeRouteEnter(to, from, next) {
    fetchData(to.params.id).then(data => {
      next(vm => vm.setData(data))
    })
  }
}

响应式页面设计

结合CSS媒体查询和Vue的计算属性实现响应式：

<script>
export default {
  computed: {
    isMobile() {
      return window.innerWidth < 768
    }
  }
}
</script>

<style>
@media (max-width: 768px) {
  .page-container {
    padding: 10px;
  }
}
</style>