在 Vue.js 中使用带参数的路由可以让你根据 URL 中的动态段来显示不同的内容。Vue Router 是官方的路由管理器，它与 Vue.js 深度集成，支持嵌套路由、懒加载、导航守卫等高级功能。

定义带参数的路由

首先，你需要安装 vue-router（如果你还没有安装的话）：

npm install vue-router

然后，在你的路由配置中定义一个或多个带有参数的路由。参数通常用冒号 : 开头来表示。例如，假设你有一个用户详情页面，URL 格式为 /user/:id，其中 :id 就是一个参数，代表用户的 ID。

import Vue from 'vue';
import Router from 'vue-router';
import User from './components/User.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]
});

在组件中访问参数

在 User 组件中，你可以通过 $route.params 对象来访问路由参数。例如：

<template>
  <div>
    <h1>用户详情</h1>
    <p>ID: {{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  name: 'User',
  // 组件内的守卫可以在参数改变时重新获取数据
  beforeRouteUpdate(to, from, next) {
    // 参数改变时，例如从 /user/1 到 /user/2
    console.log('参数更新了:', to.params.id);
    this.fetchData(to.params.id);
    next();
  },
  methods: {
    fetchData(id) {
      // 使用 id 获取用户数据
      console.log('获取用户数据:', id);
    }
  },
  created() {
    // 组件创建完成后获取数据
    this.fetchData(this.$route.params.id);
  }
}
</script>

路由跳转

当你需要在应用中链接到带参数的路由时，可以使用 <router-link> 组件或编程方式调用 this.$router.push 方法。

<router-link :to="{ name: 'user', params: { id: 123 }}">用户123</router-link>

编程方式

this.$router.push({ name: 'user', params: { id: 123 } });

以上就是 Vue.js 中如何使用带参数的路由的基本介绍。希望这能帮助你更好地理解和使用 Vue Router。如果你有更多具体的问题或需要进一步的帮助，请随时提问！

在 Vue.js 中使用 router-link 带参数是一种常见的需求，特别是在构建单页面应用 (SPA) 时。下面是一个详细的示例，展示如何在 router-link 中传递参数。

1. 安装和配置 Vue Router

首先，确保你已经安装了 Vue Router 并进行了基本配置。如果没有，可以按照以下步骤进行安装和配置：

安装 Vue Router

npm install vue-router
# 或者
yarn add vue-router

配置路由

在你的项目中创建一个路由配置文件，例如 src/router/index.js：

import Vue from 'vue';
import Router from 'vue-router';
import UserDetail from './components/UserDetail.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'UserDetail',
      component: UserDetail
    }
  ]
});

在你的 Vue 组件中，使用 router-link 组件来创建带参数的链接。你可以通过 to 属性来指定目标路径和参数。

示例代码

假设你有一个组件 App.vue，其中包含一个 router-link 链接：

<template>
  <div id="app">
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        <router-link :to="{ name: 'UserDetail', params: { id: user.id } }">
          {{ user.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
        { id: 3, name: 'Charlie' }
      ]
    };
  }
};
</script>

3. 在目标组件中访问参数

在目标组件 UserDetail.vue 中，你可以通过 this.$route.params 来访问传递的参数。

示例代码

<template>
  <div>
    <h2>用户详情</h2>
    <p>ID: {{ userId }}</p>
    <p>Name: {{ userName }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id;
    },
    userName() {
      // 这里可以根据 userId 获取用户名，假设我们有一个简单的映射
      const userMap = {
        1: 'Alice',
        2: 'Bob',
        3: 'Charlie'
      };
      return userMap[this.userId] || 'Unknown';
    }
  }
};
</script>

4. 动态路由匹配

如果你有多个动态参数，可以在路由配置中定义多个动态段。例如：

{
  path: '/user/:id/:name',
  name: 'UserDetail',
  component: UserDetail
}

然后在 router-link 中传递多个参数：

<router-link :to="{ name: 'UserDetail', params: { id: user.id, name: user.name } }">
  {{ user.name }}
</router-link>

在目标组件中访问这些参数：

<template>
  <div>
    <h2>用户详情</h2>
    <p>ID: {{ userId }}</p>
    <p>Name: {{ userName }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id;
    },
    userName() {
      return this.$route.params.name;
    }
  }
};
</script>

以上就是如何在 Vue.js 中使用 router-link 传递参数的详细步骤。