当前位置: 首页 > Web前端 > vue.js

vue路由参数_0

时间:2023-04-01 10:48:57 vue.js

解决方法1路由配置设置参数问题:参数直接显示在地址栏。从about组件跳转到home组件about组件跳转到Home组件jumpToHome(id){this.$router.push({path:`/home/${id}`,})}homecomponentexportdefault{name:'Home',data(){return{getParam:''}},mounted(){this.getParam=this.$route.params.id||'';}}路由配置constroutes=[{path:'/',name:'Home',component:Home},{path:'/home/:id',/*路由中的配置参数与路由中的一致组件*/name:'Home',component:Home},{path:'/about',name:'About',component:()=>import(/*webpackChunkName:"about"*/'../views/About.vue')}]代码片段解决方案2params问题:页面刷新会使参数失效。about组件跳转到Home组件exportdefault{name:'About',methods:{jumpToHome(){this.$router.push({name:'Home',params:{id:'test1123'}})}}}home组件导出默认值{name:'Home',data(){return{getParam:''}},mounted(){this.getParam=this.$route.params.id||'';}}路由配置constroutes=[{path:'/',name:'Home',component:Home},{path:'/home',name:'Home',component:Home},{path:'/about',name:'About',component:()=>import('../views/About.vue')}]代码片段解决方案3路径+查询问题:参数显示在url中about组件jumpToHome(){this.$router.push({path:'/home',query:{id:'testquery100'}})}homecomponentmounted(){this.id=this.$route.query.id||'';}路由配置constroutes=[{path:'/',name:'Home',component:Home},{path:'/home',name:'Home',component:Home},{path:'/about',名称:'关于',component:()=>import('../views/About.vue')}]代码片段