vue文件中index.vue的使用方法

<template>
  <div>
    <keep-alive>	//组件缓存
      <home-page v-if="pageName === 'homePage'"></home-page>
    </keep-alive>
      <add-page v-if="pageName === 'addPage'"></add-page>
      <info-page v-if="pageName === 'infoPage'"></info-page>
      <edit-page v-if="pageName === 'editPage'"></edit-page>
  </div>
</template>

<script>	//引入页面文件
import homePage from './home'
import addPage from './add'
import infoPage from './info'
import editPage from './edit'

export default {
  data() {
    return {
      pageName: '',
      iData: localStorage.iData ? JSON.parse(localStorage.iData) : {}
    }
  },
  components: {		//注册页面
    homePage, addPage, infoPage, editPage
  },
  mounted() {
    this.routerPage()
  },
  watch: {
    $route() {
      this.routerPage()
    }
  },
  methods: {
    routerPage() {		//监听显示哪个页面
      let name = this.$route.query.name
      if (name) {
        this.pageName = name
      } else {
        this.pageName = 'homePage'
      }
    },
    onPageName(flag = {}, data = {}) {		//更改页面方法
      this.$router.push({
        name: 'contract',
        query: flag
      })
      localStorage.iData = JSON.stringify(data)
      this.iData = data
    }
  }
}
</script>

this.$parent.onPageName();	//默认跳转主页

this.$parent.onPageName({	//调用跳转页面方法，name为要切换的页面
  name: 'infoPage'
})

this.$parent.onPageName({	//跳转页面并携带数据
  name: 'addPage'
}, {
  come: 'editPage',
  batchUni: this.getData.batchUni
})