本文详细介绍了在Vue项目中，如何通过路由从index.vue组件向test.vue组件传递参数，包括使用params和query两种方式的区别及应用场景。指出使用params传参在页面刷新后参数会丢失，而query则不会丢失，适合需要保持参数状态的场景。
index.vue向test.vue传参数
路由router.js配置如下：
{
path: ‘/index’,
name: ‘index’,
component: () => import(’…/pages/index’)
},
{
path: ‘/test’,
name: ‘test’,
component: () => import(’…/pages/test’)
},
1.使用params
index.vue中：
this.router.push(name:′test′,//路由中的nameparams:name:′hello,test′)test.vue使用参数:this.router.push({
name: 'test', // 路由中的name
params: { name: 'hello,test' }
})
test.vue使用参数:
this.router.push(name:′test′,//路由中的nameparams:name:′hello,test′)test.vue使用参数:this.route.params.name
缺点：刷新test页面，name值丢失
2.使用query
index.vue中:
this.$router.push({
name: ‘test’, // 路由中的name
query: { name: ‘hello,test’ }
})
test.vue使用参数:
this.$route.query.name
刷新test页面，name值不丢失
在开发中，若希望刷新页面后接收的参数不丢失，应该使用query方法
扫一扫
1713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
