vue2路由带参跳转

在 Vue 2 中，你可以使用 Vue Router 来进行带参数的路由跳转。以下是一个示例代码：

首先，你需要在路由配置中定义带参数的路由路径。你可以使用 `:` 来指定参数的占位符。

// 路由配置
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: UserComponent,
  },
];

const router = new VueRouter({
  routes,
});

在上述示例中，我们定义了一个带参数的路由 `/user/:id`，其中 `:id` 是参数的占位符。

接下来，你可以使用 `router-link` 组件或编程式导航来实现带参数的路由跳转。

使用 `router-link` 组件：

<router-link :to="'/user/' + userId">Go to User</router-link>

在上述示例中，我们使用了动态绑定 `:to` 属性，并通过拼接字符串的方式传递参数。

使用编程式导航：

// 在组件中
this.$router.push('/user/' + userId);

在上述示例中，我们使用 `$router.push()` 方法来进行编程式导航，同样是通过拼接字符串的方式传递参数。

无论是使用 `router-link` 还是编程式导航，都可以带参数进行路由跳转。在目标页面中，你可以通过 `$route.params` 来获取传递的参数。

// 在目标组件中获取参数
mounted() {
  const userId = this.$route.params.id;
  console.log(userId);
}

在上述示例中，我们通过 `$route.params` 获取了传递的参数，并输出到控制台。

希望这可以帮助到你！