1、router-link 方式跳转:
<!-- 带查询参数,query 传递方式 下面的结果为 /orderDetail?id=1 -->
//1.通过路径跳转路由 通过query传递参数
<router-link :to="{ path: 'orderDetail', query: { id: '1' }}">订单详情</router-link>
// 组件中获取参数的方式:
this.$route.query.id
<!-- 带查询参数,query 传递方式 下面的结果为 /orderDetail?id=1 -->
//2.通过name跳转路由 通过params传递参数 , 通过params进行路由传参的时候只能由name引入
<router-link :to="{ name: 'orderDetail', params: { id: 1 }}">订单详情</router-link>
// 组件中获取参数的方式:
this.$route.params.id
2、编程式js方式跳转 this.$router.push:
//1.通过name跳转路由 通过params传递参数
this.$router.push({
name: 'orderDetail',
params: {
id: 1
}
});
// 组件中获取参数的方式:
this.$route.params.id
//2.通过路径跳转 通过query传递参数
this.$router.push({
path: "/orderDetail",
query: {
id: 1
}
});
// 组件中获取参数的方式:
this.$route.query.id