Vue.js 动态路由链接

在本文中，我们将介绍Vue.js中的动态路由链接（Dynamic router-link）的用法和示例。

什么是动态路由链接

在Vue.js中，路由链接（router-link）用于导航到不同的页面或路由。动态路由链接则是根据数据的变化而动态生成链接。通过动态路由链接，我们可以根据不同的数据生成对应的链接，并实现页面的跳转。

使用动态路由链接

Vue.js提供了<router-link>组件来创建路由链接。通过给<router-link>组件添加:to属性，并将动态数据绑定到该属性上，就可以实现动态路由链接。

下面是一个示例：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <router-link :to="`/user/${item.id}`">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Mary' },
        { id: 3, name: 'Tom' }
      ]
    };
  }
};
</script>

在上面的示例中，我们通过v-for指令遍历items数组，并将其中的每一项绑定到<router-link>组件的:to属性上。每个路由链接都会根据item.id生成对应的动态路由。当点击某个路由链接时，页面会根据对应的路由进行跳转。

动态路由参数

在实际应用中，动态路由链接通常会携带参数，这些参数可以用来在跳转后的页面中获取特定的数据。

Vue.js使用$route.params来获取动态路由参数。

下面是一个示例：

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        <router-link :to="`/user/ ${user.id}`">{{ user.name }}</router-link> </li> </ul> <div> <h2>User Detail</h2> <p>Name: {{$ route.params.name }}</p> <!-- 获取动态路由参数name -->
      <p>Email: {{ $route.params.email }}</p> <!-- 获取动态路由参数email -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'John', email: 'john@example.com' },
        { id: 2, name: 'Mary', email: 'mary@example.com' },
        { id: 3, name: 'Tom', email: 'tom@example.com' }
      ]
    };
  }
};
</script>

在上面的示例中，我们通过$route.params来获取动态路由参数。在用户详情页面中，我们可以通过$route.params.name和$route.params.email来获取对应的参数值。

动态路由链接与命名路由

在使用动态路由链接时，我们还可以结合命名路由（Named Routes）来为动态链接指定路由名称。

下面是一个示例：

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        <!-- 通过name属性指定路由名称 -->
        <router-link :to="{ name: 'user', params: { id: user.id }}">{{ user.name }}</router-link>
      </li>
    </ul>

    <div>
      <h2>User Detail</h2>
      <p>Name: {{  $route.params.name }}</p> <p>Email: {{$ route.params.email }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'John', email: 'john@example.com' },
        { id: 2, name: 'Mary', email: 'mary@example.com' },
        { id: 3, name: 'Tom', email: 'tom@example.com' }
      ]
    };
  }
};
</script>

在上面的示例中，我们使用name属性为动态路由链接指定了一个名称为user的命名路由。当点击路由链接时，页面会根据命名路由跳转到对应的路由，并且动态参数id会传递到目标页面上。