欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

在Vue中,如何在刷新页面时保持params和query传参不丢失的问题

最编程 2024-08-01 19:00:51
...

从其他页面传过来的参数刷新页面的时候参数会丢失
解决办法,只有常用的两种方法

通过 params 传参

注意点1、路由后面必须带参数,2、传参的页面中name: 'content',不能写成name: '/content',

//路由router.js
{
   path: '/content/:data',
   name: 'content',
   component: content
}

//进行传参的页面
methods:{
   tocontent(data){
     // 列表中的传参  
      this.$router.push({
         name: 'content',
         params: {
           data: JSON.stringify(data)
         }
     })
   }
}

//接收参数的页面
export default{
    name:'content',
    data(){
      return{
        data:{}
      }
    },
    created(){
      this.data = JSON.parse(this.$route.params.data);
    }
 }

通过 query 传参

//路由router.js
{
   path: '/content',
   name: 'content',
   component: content
}

//进行传参的页面
methods:{
   tocontent(data){
     // 列表中的传参  
      this.$router.push({
         name: '/content',
         query: {
           data: JSON.stringify(data)
         }
     })
   }
}

//接收参数的页面
export default{
    name:'content',
    data(){
      return{
        data:{}
      }
    },
    created(){
      this.data = JSON.parse(this.$route.query.data);
    }
 }