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

microcosm1994 发布于2019-08-02 15:14 / 1007人阅读

摘要：使用和组合传参路由配置获取参数刷新参数丢失显示注意此方法第一次跳转是没有问题的，参数也可以传过去，但是刷新页面后，参数就没了这个地方其实还有一个问题，当你传递的参数是类型，第一次是没有问题的，获取的时候也是类型，但是当你刷新页面后，变成类

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

GPU云服务器云服务器传参时新手使用linux 新手如何使用MTR工具 vue-router

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53992.html

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

摘要：使用和组合传参路由配置获取参数刷新参数丢失显示注意此方法第一次跳转是没有问题的，参数也可以传过去，但是刷新页面后，参数就没了这个地方其实还有一个问题，当你传递的参数是类型，第一次是没有问题的，获取的时候也是类型，但是当你刷新页面后，变成类 1. 使用name和params组合传参 this.$router.push({name: details, params: {id: 233}})...

clasnake 2019-08-23 17:58 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
利用百度ai进行人脸识别，以及传参时遇到的问题

摘要：安装推荐安装好，执行新建是人脸识别的客户端，为使用人脸识别的开发人员提供了一系列的交互方法。参考如下代码新建一个你的你的你的你的调用人脸检测这里仅以人脸检测为例，其他都大同小异。百度文档中提到，图片信息总数据。安装SDK 推荐安装好pip，执行pip install baidu-aip 新建AipFace AipFace是人脸识别的Python SDK客户端，为使用人脸识别的开发人员...

bbbbbb 2019-07-31 10:34 评论0 收藏0