首页 > 其他 > 详细

vue路由跳转

时间:2021-09-02 00:37:31      阅读:11      评论:0      收藏:0      [点我收藏+]

通过 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);
    }
 }

vue路由跳转

原文:https://www.cnblogs.com/ydz9527/p/15206046.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!