pinked

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

[vue]传递参数与重定向

传递参数与重定向

Main.vue

<!--name:对应index.js中router的name, params:传参-->
<router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>

index.js的router

{
  path: '/user/Profile/:id',
  name: 'UserProfile',
  component: UserProfile
},

Profile.vue获取并展示参数

{{$route.params.id}}//template中所有的元素必须包含在标签中

也可以通过props来传递参数

index.js的router

path: '/user/Profile/:id',
name: 'UserProfile',
component: UserProfile,
props: true  //允许props传参

Profile.vue直接用{{id}}即可

{{id}}

重定向的方法

router路由

{
  path: '/back',
  redirect: '/main'
},
<router-link to="/back">返回首页</router-link>

登录用户

Login.vue

this.$router.push("/main/"+this.form.username);

router

path: '/main/:name',
props: true,
component: Main,

main.vue

<script>
  export default {
    props: ['name'],
    name: "Main"
  }
</script>

posted on   pinked  阅读(1329)  评论(0编辑  收藏  举报

编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
点击右上角即可分享
微信分享提示