vue2路由带参跳转
时间: 2023-08-25 11:07:20 浏览: 103
在 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
获取了传递的参数,并输出到控制台。
希望这可以帮助到你!