1、方式一
通过 query 的方式也就是?的方式路径会显示传递的参数
HTML的方式
<router-link :to="{name:xxx,query:{page:1,code:8899}}"></router-link>
JS的方式
<template>
<div>
<a @click="routerTo()">query传参</a>
</div>
</template>
<script>
export default {
methods: {
routerTo() {
this.$router.push({
name: `xxx`,
query: {
page: '1', code: '8989'
}
})
}
}
}
</script>
接收参数
this.$route.query.page
2、方式二
通过 params 的方式,路径不会显示传递的参数
HTML的方式
<router-link :to="{name:xxx,params:{page:1,code:8899}}"></router-link>
JS的方式
<template>
<div>
<a @click="routerTo()">params传参</a>
</div>
</template>
<script>
export default {
methods: {
routerTo() {
this.$router.push({
name: `xxx`,
params: {
page: '1', code: '8989'
}
})
}
}
}
</script>
接收参数
this.$route.params.page
3、方式三
通过:冒号的的形式传递传参
- 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js 文件里配置路由。
{
path:'/one/reg/:num',
component:Reg
}
<router-link to="/one/log/123"></router-link>
接收参数
this.$route.params.num
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于