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

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路由传参时，刷新页面，参数将当成字符串来处理？
在练习编程路由导航传参时,发现将 num:10传到积分页面通过computed属性加1变成11,但刷新了本页后并未按照预想的那样, 变为11,而是字符串拼接成了101, 然后,typeof查看传过去的 ...
vue router传参_新手使用vue-router传参时注意事项
1. 使用name和params组合传参 this.$router.push({name: 'details', params: {'id': 233}}) 路由配置 import Vue from ...
vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
Vue路由传参params 与 query
一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...
Vue路由传参详解（params 与 query）
Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...
【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...
Vue路由传参的几种方式
前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具 ...
Vue路由传参几种方式
① 动态路由传参 {path:'detail/:username?',name:'a', component:()=>import('@/components/Detail.vue')}< ...

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

1. 使用name和params组合传参

路由配置

获取参数

刷新参数丢失显示 undefined

第一次是预期结果 // 234

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

参数丢失解决方案：

2. path和query组合传参

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

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

官方文档 vue-router

新手使用vue-router传参时注意事项相关推荐

最新文章

热门文章

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

1. 使用name和params组合传参

路由配置

获取参数

刷新参数丢失 显示 undefined

第一次是预期结果 // 234

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

参数丢失解决方案：

2. path和query组合传参

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

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

官方文档 vue-router

新手使用vue-router传参时注意事项相关推荐

最新文章

热门文章

刷新参数丢失显示 undefined

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