Vue.js 2实现电子票务网站不刷新页面动态更新URL的方法

需求回顾 #

期望URL格式：https://e-tickets.com/movies/{movie-title}-{movie-id}，执行流程：

1. 用户点击电影 → 跳转至纯ID URL（如/movies/1203）
2. 组件渲染完成后，通过ID调用API获取电影详情
3. 拿到详情后，无刷新修改URL为带标题的格式（如/movies/black-panther-1203）

实现步骤 #

1. 配置Vue Router路由（开启history模式）

确保路由使用history模式（避免URL带#），定义可匹配纯ID或标题+ID的路由规则，并通过props解析出电影ID：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import MovieDetail from '@/components/MovieDetail'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/movies/:movieSlug',
      name: 'MovieDetail',
      component: MovieDetail,
      props: route => {
        // 从slug中提取ID（无论是否带标题，最后一段固定为ID）
        const slugSegments = route.params.movieSlug.split('-')
        const movieId = slugSegments[slugSegments.length - 1]
        return { movieId }
      }
    }
  ]
})

2. 电影列表跳转逻辑

点击电影时，先跳转至纯ID格式的URL：

<!-- MovieList.vue -->
<template>
  <div class="movie-list">
    <div 
      v-for="movie in movies" 
      :key="movie.id" 
      @click="goToMovieDetail(movie.id)"
      class="movie-item"
    >
      {{ movie.title }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: [/* 你的电影列表数据 */]
    }
  },
  methods: {
    goToMovieDetail(movieId) {
      this.$router.push(`/movies/${movieId}`)
    }
  }
}
</script>

3. 电影详情组件处理URL替换

在详情组件的mounted钩子中调用API，拿到电影标题后将URL替换为带标题的格式（使用replace避免添加冗余历史记录）：

<!-- MovieDetail.vue -->
<template>
  <div v-if="movie" class="movie-detail">
    <h1>{{ movie.title }}</h1>
    <p>{{ movie.description }}</p>
    <!-- 其他电影信息展示 -->
  </div>
  <div v-else>加载中...</div>
</template>

<script>
export default {
  props: ['movieId'],
  data() {
    return {
      movie: null
    }
  },
  async mounted() {
    await this.fetchMovieDetail()
  },
  methods: {
    async fetchMovieDetail() {
      try {
        // 调用API获取电影详情（示例用axios，可根据实际请求库调整）
        const res = await this.$axios.get(`/api/movies/${this.movieId}`)
        this.movie = res.data

        // 将标题转换为kebab-case格式（如"Black Panther" → "black-panther"）
        const kebabTitle = this.movie.title
          .toLowerCase()
          .replace(/\s+/g, '-')
          .replace(/[^a-z0-9-]/g, '') // 移除URL非法字符
        const newSlug = `${kebabTitle}-${this.movieId}`

        // 仅当当前URL是纯ID格式时，才执行替换
        if (this.$route.params.movieSlug === this.movieId.toString()) {
          this.$router.replace({
            name: 'MovieDetail',
            params: { movieSlug: newSlug }
          })
        }
      } catch (err) {
        console.error('加载电影详情失败:', err)
      }
    }
  }
}
</script>

关键注意事项 #

• history模式后端配置：需在后端（如Nginx、Apache）配置重定向规则，确保刷新带标题的URL时能正确返回Vue应用入口文件。
• URL兼容性：路由规则同时支持纯ID和标题+ID格式，用户直接访问带标题的URL也能正常加载详情。
• 历史记录优化：使用$router.replace而非push，避免用户后退时回到纯ID的URL，提升浏览体验。

内容的提问来源于stack exchange，提问作者Chairil Fauzi Firmansyah