详解新手使用vue-router传参时注意事项

前端  /  管理员 发布于 4年前   286

1. 使用name和params组合传参

this.$router.push({name: 'details', params: {'id': 233}})

路由配置

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({  mode: 'history',  routes: [    {      path: '/details',      name: 'details',      component: resolve => require(['../components/details'], resolve)    }  ]})

获取参数

this.$route.params.id // 233

刷新参数丢失 显示 undefined

this.$route.params.id // undefined

注意：此方法第一次跳转是没有问题的，参数也可以传过去，但是刷新页面后，参数就没了 (ps: 这个地方其实还有一个问题，当你传递的参数是number类型，第一次是没有问题的，获取的时候也是number类型，但是当你刷新页面后，number变成string类型，如果涉及计算的建议先类型转换一下)

第一次是预期结果 // 234

console.log(this.$route.params.id + 1)

刷新页面后直接字符串拼接了 // 2331

参数丢失解决方案：

routes: [    {      path: '/details/:id', // 这里配置的要和你传递的参数名保持一致      name: 'details',      component: resolve => require(['../components/details'], resolve)    }  ]

2. path和query组合传参

this.$router.push({path: '/details', query: {id: 666}})

this.$route.query.id // 666

此方法参数会跟在问号后面 例如：/details?id=666，该方法刷新页面不会丢失参数

最后：根据自己的项目选择合适的传参方式

官方文档vue-router

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• vue-router传参用法详解
• vue-router命名路由和编程式路由传参讲解
• 详解vue-router传参的两种方式
• 浅析vue-router jquery和params传参(接收参数)$router $route的区别
• 解决vue-router中的query动态传参问题
• 浅谈vue-router 路由传参的方法
• vue-router2.0 组件之间传参及获取动态参数的方法