Vue---传参params 、query刷新页面参数会丢失

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

通过 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);
    }
 }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容