当前位置：首页 > VUE

vue实现行程

2026-03-30 12:05:17VUE

Vue 实现行程功能

使用 Vue 实现行程功能需要结合组件化开发、状态管理和路由控制。以下是一个分步实现的方案：

1. 创建行程组件 创建 Trip.vue 组件，用于展示行程列表和详情：

<template>
  <div>
    <h3>我的行程</h3>
    <ul>
      <li v-for="trip in trips" :key="trip.id">
        {{ trip.name }} - {{ trip.date }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      trips: [
        { id: 1, name: '北京三日游', date: '2023-10-01' },
        { id: 2, name: '上海商务行', date: '2023-11-15' }
      ]
    }
  }
}
</script>

2. 添加行程表单 创建 AddTrip.vue 组件用于添加新行程：

<template>
  <form @submit.prevent="addTrip">
    <input v-model="newTrip.name" placeholder="行程名称">
    <input v-model="newTrip.date" type="date">
    <button type="submit">添加</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newTrip: {
        name: '',
        date: ''
      }
    }
  },
  methods: {
    addTrip() {
      this.$emit('add-trip', {...this.newTrip})
      this.newTrip = { name: '', date: '' }
    }
  }
}
</script>

3. 使用 Vuex 管理状态 创建 store 管理行程数据：

// store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    trips: []
  },
  mutations: {
    ADD_TRIP(state, trip) {
      state.trips.push({
        ...trip,
        id: state.trips.length + 1
      })
    }
  },
  actions: {
    addTrip({ commit }, trip) {
      commit('ADD_TRIP', trip)
    }
  }
})

4. 配置路由 设置行程相关路由：

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import TripList from './views/TripList.vue'
import TripDetail from './views/TripDetail.vue'

const routes = [
  { path: '/trips', component: TripList },
  { path: '/trips/:id', component: TripDetail }
]

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

export default router

5. 实现行程详情页 创建 TripDetail.vue 展示行程详情：

<template>
  <div v-if="trip">
    <h3>{{ trip.name }}</h3>
    <p>日期: {{ trip.date }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    trip() {
      return this.$store.state.trips.find(
        t => t.id === parseInt(this.$route.params.id)
      )
    }
  }
}
</script>

6. 集成地图组件 安装地图库并集成：

npm install vue2-google-maps

在组件中使用：

vue实现行程

<template>
  <GmapMap
    :center="{lat: 39.9042, lng: 116.4074}"
    :zoom="12"
    style="width: 100%; height: 400px"
  >
    <GmapMarker
      v-for="(marker, index) in markers"
      :key="index"
      :position="marker.position"
    />
  </GmapMap>
</template>

以上实现方案涵盖了行程功能的核心模块，可根据实际需求进行扩展和完善。