组件页面跳转及父子组件传参

(1) 方法一

<template>
    <div>
        <ul>
            <li @click="showPage1" :class="{active:isShow1}">11</li>
            <li @click="showPage2" :class="{active:isShow2}">22</li>
            <li @click="showPage3" :class="{active:isShow3}">33</li>
            <li @click="showPage4" :class="{active:isShow4}">44</li>
        </ul>
    </div>
    <div>
        <NewPage :pageIndex="pageIndex"></NewPage>
    </div>
</template>

<script>
    //引入NewPage组件
    import NewPage from 'NewPage页面所在位置'
    export default{
        components:{NewPage},
        data(){
            return{
                pageIndex:1,
                isShow1:true,
                isShow2:false,
                isShow3:false,
                isShow4:false
            }
        },
        create(){
            this.pageIndex = 1
        },
        methods : {
            showPage1 : function(){
                this.pageIndex = 1;
            },
            showPage2 : function(){
                this.pageIndex = 2;
            },
            showPage3 : function(){
                this.pageIndex = 3;
            },
            showPage4 : function(){
                this.pageIndex = 4;
            }
        },
        watch:{
            'pageIndex' : function(newIndex,oldIndex){
                this.isShow1 = false;
                this.isShow2 = false;
                this.isShow3 = false;
                this.isShow4 = false;
                if (!newIndex) return false;
                this.pageIndex = newIndex;
                if (newIndex === 1) {
                    this.isShow1 = true
                }else if (newIndex === 2) {
                    this.isShow2 = true
                }else if (newIndex === 3) {
                    this.isShow3 = true
                }else if (newIndex === 4) {
                    this.isShow4 = true
                }else {
                    //
                }
            }
        }
    }
</script>

<div></div>

<script>
    export default {
    name: "NewPage",
    data() {
      return {}
    },
    props:[
        'pageIndex'
    ],
    methods: {
     getInfo(){
        let pageIndex = this.pageIndex || this.$props.pageIndex
        info(pageIndex).then(res => {
          this.kssData = res.data;
        }).catch(err => {})
      },
  },
  mounted(){
     this.getInfo();
    },
    watch:{
      'pageIndex':function(newIndex,oldIndex){
        console.log('newIndex',newIndex)
        if(!newIndex) return false
        this.getInfo()
      }
}
</script>

 (2) 方法二

<template>
    <div>
        <ul>
            <li @click="query('A')" :class="{active:menuOne}">A</li>
            <li @click="query('B')" :class="{active:menuTwo}">B</li>
            <li @click="query('C')" :class="{active:menuThree}">C</li>
        </ul>
    </div>
    <div>
        <component :is="componentId"></component>
    </div>
</template>

<script>
    //引入需要的组件页面
    components:{},
    data(){
        return{
             menuOne:true,
             menuTwo:false,
             menuThree:false,
             componentId: 'A'
        }
    },
    methods:{
        query(name,menu){
            this.componentId = name
        }
    },
    watch:{//动态组件
          'componentId':function(newId,oldId){
            if(!newId) return false;
            this.menuTwo = false;
            this.menuOne = false;
            this.menuThree = false;
            if(newId === 'A') {
              this.menuOne = true
            } else if (newId === 'B') {
              this.menuTwo = true
            } else if (newId === 'C') {
              this.menuThree = true
            } else {
              //
            }
          }
        }
</script>