[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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee