Vue-router路由传参的三种方式
2023-09-11 14:19:06 时间
本文简单介绍下三种路由传参:
(1)在路由中配置
{ path : ‘/home/:id’, name : ‘Dome’, component }
然后写调用的时候
this.$router.push({path : `/describle/${id}`})
取值:
$route.parms.id
(2)通过params传参,通过name配置路由
路由配置:
{ path : ‘/home’, name : ‘Home’, component : Home } this.$router.push({ name : ‘Home’, params : { id : id } })
获取
$route.params.id
(3)使用path来配置路由,通过query来传递参数,参数会在url后边的?id=?中显示
路由配置:
{ path : ‘/home’, name : ‘Home, component : Home }
调用:
this.$router.push({ path : ‘/home, query : { id : id } })
获取
this.$route.query.id
.
相关文章
- MEVN 架构(MongoDB + Express + Vue + NODEJS)搭建
- Vue_(组件)实例方法
- django-vue 混合开发
- vue 使用路由重复跳转同一页面
- vue axios的使用
- vue-router+vuex实现加载动态路由和菜单
- thinkphp6: 使用前后端分离的验证码(thinkphp 6.0.9/php 8.0.14/vue 3.2.26)
- vue-cli3的eslint配置问题
- vue.js3: 使用全局css样式文件(vue@3.2.37)
- vue获取当前路由
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- Vue.js:Vue-Router动态路由从服务器接口获取路由数据
- 计算机毕设 SSM Vue的公寓宿舍后勤管理系统(含源码+论文)
- Vue学习之--------路由守卫(2022/9/6)
- Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- vue路由跳转报错解决
- Vue中vue-i18n结合vant-ui实现国际化
- 076:vue+openlayers选取feature,平移feature
- 编写 Vue v-for 循环更优雅的 7 种方式
- 【三十天精通 Vue 3】 第十天 Vue 状态管理详解
- 如何将vue项目打包为.apk文件
- vue路由传递参数的几种方式详解