vue

您所在的位置：网站首页 › router传参缺点 › vue

vue

2023-08-30 19:51| 来源: 网络整理| 查看: 265

一、使用vue里的标签来传递参数

1.标签传参

Hi页面1

2.接收参数用this.$route.params.userId

二、使用router的name属性也就是params来传递参数，params：参数不会显示到路径上，用params传参，这个方法有一个bug就是当你传参过去的时候，再次刷新页面时参数就会丢失；

params传参： 1.配置路径router

export default new Router({ routes: [ { path: '/testVueRouter', name: 'TestVueRouter', component: TestVueRouter }, { path: '/testVueRouterTo', // 一定要写name,params必须用name来识别路径 name: 'TestVueRouterTo', component: TestVueRouterTo } ] })

2.传递参数用$router

query传参 export default { methods: { routerTo() { this.$router.push({ name: `TestVueRouterTo`, params: { page: '1', code: '8989' } }) } } }

3：接受参数用$route

export default{ data() { return { page: '', code: '' } }, created() { this.getRouterData() }, methods: { getRouterData() { this.page = this.$route.params.page this.code = this.$route.params.code console.log('page', this.page) console.log('code', this.code) } } }

三、query：最好也用name来识别，保持与params一致性，好记了，路径传参，query：由于参数适用路径传参的所以F5强制刷新也不会被清空。（传参强烈建议适用string）

1.配置路径router

2.query传参

query传参 export default { methods: { routerTo() { this.$router.push({ name: `TestVueRouterTo`,　　　　　// 只是把query改了，其他都没变 query: { page: '1', code: '8989' } }) } } }

3.接收参数

export default{ data() { return { page: '', code: '' } }, created() { this.getRouterData() }, methods: { getRouterData() { // 只是改了query，其他都不变 this.page = this.$route.query.page this.code = this.$route.query.code console.log('page', this.page) console.log('code', this.code) } } }

如果要隐藏参数用params，如果强制刷新不被清除用query

【本文地址】

vue

vue

今日新闻

推荐新闻