| 【vue路由传参】vue自带方法路由传参方式、页面跳转带id过去、刷新页面数据不丢失、隐藏URL后的参数 详细教程 | 您所在的位置：网站首页 › vue路由方法 › 【vue路由传参】vue自带方法路由传参方式、页面跳转带id过去、刷新页面数据不丢失、隐藏URL后的参数 详细教程 |
【vue路由传参】vue自带方法路由传参方式、页面跳转带id过去、刷新页面数据不丢失、隐藏URL后的参数 详细教程
|
文章目录
vue路由传参方式一、页面刷新数据会丢失方法一：通过路由属性中的name来确定匹配的路由，通过params来传递参数*该方法可以隐藏URL后的参数
方法二：使用Vue全局API：Vue.observable
二、页面刷新数据不会丢失方法一：使用动态路由传参，path中携带参数id，路由中使用 /:id 绑定对应参数方法二：使用path匹配路由，通过query传参
vue路由传参方式
项目中很多情况下都需要进行路由之间的传值，想过很多种方式 sessionstorage/localstorage/cookie 进行离线缓存存储也可以，用vuex也可以，不过有些大材小用吧，不管怎么说因场景而异 一、页面刷新数据会丢失使用场景： 页面跳转带id过去 方法一：通过路由属性中的name来确定匹配的路由，通过params来传递参数通过路由属性中的name来确定匹配的路由，通过params来传递参数 eg:点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去 查看详情 // 父组件传值：将id带过去 methods：{ insurance(id) { this.$router.push({ name: 'particulars', params: { id: id } }) } // 路由配置 { path: '/particulars', name: 'particulars', component: particulars } // 子组件：获取参数id this.$route.params.id温馨提示：该方法刷新页面数据会丢失 *该方法可以隐藏URL后的参数
使用Vue全局API：Vue.observable 详细教程看如下博客：Vue.observable使用教程 温馨提示：该方法刷新页面数据会丢失 二、页面刷新数据不会丢失 方法一：使用动态路由传参，path中携带参数id，路由中使用 /:id 绑定对应参数使用动态路由传参，path中携带参数id，路由中使用 /:id 绑定对应参数 methods：{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, }) } // 对应路由配置 { path: '/particulars/:id', name: 'particulars', component: particulars } // 子组件中获取参数 this.$route.params.id温馨提示：该方法刷新页面数据不会丢失 方法二：使用path匹配路由，通过query传参使用path匹配路由，通过query传参 url路径中携带： methods：{ insurance(id) { this.$router.push({ path: '/particulars', query: { id: id } }) } { path: '/particulars', name: 'particulars', component: particulars } // 子组件获取参数 this.$route.query.id温馨提示：该方法刷新页面数据不会丢失 |
【本文地址】
公司简介
联系我们