vue-传值

最新推荐文章于 2024-07-23 14:29:05 发布

王竹根

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量233

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/dianziagen/article/details/88574109

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.动态路由传值

Home.vue

<ul>
    <li v-for="(item,key) in list">
      <!--<router-link :to="'pcontent?id='+key"> {{item}}&#45;&#45;{{key}}</router-link>-->
      <router-link :to="'/pcontent/'+key"> {{item}}--{{key}}</router-link>
    </li>
  </ul>

<script>
    export default {
        name: "HomeTwo",
      data(){
          return{
            msg:'我是一个home组件',
            list:['商品111111','商品222222','商品333333']
          }
      },
    }
</script>

1、配置动态路由

routes: [
// 动态路径参数以冒号开头
{ path: '/user/:id', component: User }
]

, {
      path: '/pcontent/:aid',
      name: 'pcontent',
      component: Pcontent
    }

2、在对应的页面Pcontent.vue

this.$route.params获取动态路由的值

mounted() {

      console.log(this.$route.params);
}

2.get传值

<template>
<div> 
<ul>
    <li v-for="(item,key) in list">
      <!--<router-link :to="'pcontent?id='+key"> {{item}}&#45;&#45;{{key}}</router-link>-->
      <router-link :to="'/getcontent?id='+key"> {{item}}--{{key}}</router-link>
    </li>
  </ul>
</div>
</template>

<script>
    export default {
        name: "HomeTwo",
      data(){
          return{
            msg:'我是一个home组件',
            list:['商品111111','商品222222','商品333333']
          }
      },
    }
</script>

在对应的页面 this.$route.query获取动态路由的值

3.vue传值实例

新闻标题页面News.vue ->点击对应的条目根据aid展示详情

<template>    
    <div id="news">    
       我是新闻组件   


     <ul class="list">
        <li v-for="(item,key) in list">
             <router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
        </li>
     </ul>
          
    </div>

</template>


<script>

    export default{
        data(){
            return {               
               msg:'我是一个新闻组件'  ,    
               list:[]        
            }
        },
        methods:{

            requestData(){

                 var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
        this.$axios.get(api).then((response) => {
          console.log(response);
          this.listArray=response.data.result
        }).catch((error) => {
          console.log(error);
        });
        },
        mounted(){

            this.requestData();
        }
    }

</script>

详情页获取

<template>
  <div>
    shopping details
    <div v-html="list.content"></div>
  </div>
</template>

<script>
  export default {
    name: "Pcontent",
    data() {
      return {
        msg: '数据',
        list: []
      }
    },
    mounted() {
      console.log(this.$route.params.aid);
      var aid = this.$route.params.aid;
      //调用请求数据的方法
      this.requestData(aid);
    },
    methods: {
      requestData(aid) {
        var api = 'http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=' + aid;
        this.$axios.get(api).then((response) => {
          console.log(response);
          this.list = response.data.result[0];
        }).catch((error) => {
          console.log(error);
        });
      }
    }
  }
</script>

<style scoped>

</style>