Vue 动态路由的实现详情

下面就为大家详细讲解一下「Vue 动态路由的实现详情」。

什么是动态路由？

Vue 路由是一种 URL 和组件之间的映射关系，并通过 URL 触发组件的展示。而动态路由则是在 URL 中传递参数，根据参数的不同动态匹配相应的路由。例如 /article/1 和 /article/2 都可以匹配到文章详情页路由，只不过参数不同。在 Vue 中，我们可以通过“路由参数”来实现动态路由。

实现过程

配置路由参数

路由参数可以在路由路径中以“冒号 + 参数名”的形式进行配置，同时需要在创建路由实例时进行配置。例如：

const routes = [
  { path: '/article/:id', component: Article }
]
const router = new VueRouter({
  routes
})

这里配置了一个带有路由参数的路由，其中 :id 代表参数名，当用户访问 /article/1 时即可动态匹配到 Article 组件。

读取路由参数

在组件内，通过 $route 属性可以访问路由参数，例如：

mounted() {
  console.log(this.$route.params.id)
}

上面的代码可以在组件挂载时输出当前路由参数的值。如果用户访问 /article/1，则会输出 1。

监听路由参数变化

在某些情况下，需要在路由参数变化时做一些特定处理，例如重新加载组件数据。此时可以通过监视 $route 对象的变化并处理，例如：

watch: {
  '$route.params.id': function(newVal, oldVal) {
    this.loadData(newVal) // 加载组件数据
  }
}

这里定义了一个 $route.params.id 的监视器，当路由参数变化时会触发 loadData 方法从服务器重新加载数据。

示例说明

下面通过两个实例来详细说明 Vue 动态路由的实现。

实例一：参数传递

假设有一个电影列表页面，点击电影后需要跳转到对应的电影详情页。可以通过动态路由将电影 ID 传递给详情页组件，以下是示例代码：

const routes = [
  { path: '/movies/:id', component: MovieDetail }
]
const router = new VueRouter({
  routes
})

// 电影列表页面
<template>
  <div>
    <div v-for="movie in movies" :key="movie.id">
      <h3>{{movie.title}}</h3>
      <p>{{movie.summary}}</p>
      <router-link :to="'/movies/' + movie.id">查看详情</router-link>
    </div>
  </div>
</template>

// 电影详情页面
<template>
  <div>
    <h3>{{movie.title}}</h3>
    <p>{{movie.summary}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      movie: {}
    }
  },
  mounted() {
    // 加载电影详情数据
    this.movie = this.loadMovie(this.$route.params.id)
  },
  methods: {
    loadMovie(id) {
      // 实际加载数据的方法
      return {
        id: id,
        title: '电影标题',
        summary: '电影简介'
      }
    }
  }
}
</script>

使用 router-link 组件标签来实现路由跳转，将电影 ID 作为动态路由参数传递给电影详情页组件，然后在组件中通过 $route.params.id 读取参数并加载相应的电影详情数据。

实例二：参数监视

以下示例是一个图书详情页，用户可以在 URL 中直接输入 book ID 来访问相应的图书详情页。此时需要通过 $route 对象的监视器来动态获取图书数据并展示：

const routes = [
  { path: '/books/:id', component: BookDetail }
]
const router = new VueRouter({
  routes
})

<template>
  <div>
    <h3>{{book.title}}</h3>
    <p>{{book.summary}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      book: {}
    }
  },
  mounted() {
    this.loadData(this.$route.params.id)
  },
  methods: {
    loadData(id) {
      // 获取数据的方法
      this.book = {
        id: id,
        title: '图书标题',
        summary: '图书简介'
      }
    }
  },
  watch: {
    '$route.params.id': function(newId) {
      // 监视路由参数变化
      this.loadData(newId)
    }
  }
}
</script>

使用 $route.params.id 监控路由参数变化，然后调用 loadData 方法重新获取图书数据并展示在页面上。

以上就是 Vue 动态路由的实现详情，希望对大家有所帮助。