从零开始学VUE之VueRouter(传递参数)
从零开始学VUE之VueRouter(传递参数)
彼岸舞
发布于 2021-07-01 18:12:40
发布于 2021-07-01 18:12:40
代码可运行
运行总次数：0
代码可运行
传递参数
- 传递参数的主要两种类型:params和query
- params
- 配置路由格式:/router/:id
- 传递的方式:在path后面跟上对应的值
- 传递后形成的路劲:/router/123./router/abc
- query的类型
- 配置路由格式:/router,也就是普通配置
- 传递的方式:对象中使用query的key作为传递方式
- 传递后形成的路径:/router?id=123,/router?id=abc
query
新建Profile.vue
<template>
<div>
<h2>this is profile</h2>
<h2>{{$route.query.name}}</h2>
<h2>{{$route.query.age}}</h2>
<h2>{{$route.query.height}}</h2>
</div>
</template>
<script>
export default {
name: "Profile"
}
</script>
<style scoped>
</style>修改index.js
修改App.vue
<router-link :to="{path:'/profile',query:{name:'flower',age:18,height:1.70}}" replace>档案</router-link>效果
作者：彼岸舞
时间：2021\06\28
内容关于：VUE
本文属于作者原创,未经允许,禁止转发
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-06-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
