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

这篇文章主要介绍了关于vue文件中index.vue的使用方法，具有很好的参考价值，希望对大家有所帮助。

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
})

vue的index.html总结

为啥要有index.html

对vue来说index.html是一个总的入口文件，vue是单页面应用，挂在id为app的div下然后动态渲染路由模板。

单页面应用

单页面应用是和多页面应用相对而言的。多页面应用是在每次页面跳转的时候，后台服务器都重新生成一张html页面，首屏时间快（只需要加载一次html），搜索引擎优化效果好（html内容都在），但是切换慢（每次页面切换都需要发出一次http请求）。

单页面应用首次加载时会请求一次html，随后的页面渲染都依靠js动态的将当前页面的内容清除掉（原理：js可以感知url的变化），然后将下一个页面的内容挂载到当前页面上（前端实现，不是后端，无http发送时延），首屏慢，搜索引擎优化效果差，但是切换快。

index.html实战代码汇总

手机端自适应使用（px*2/100=rem)

!function (e) {
  var t = e.document
, n = t.documentElement
, i = "orientationchange" in e ? "orientationchange" : "resize"
, a = function e() {
  var t = n.getBoundingClientRect().width;
  return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 11.2), 8.55) + "px",
e
}();
  n.setAttribute("data-dpr", e.navigator.appVersion.match(/iphone/gi) ? e.devicePixelRatio : 1),
/iP(hone|od|ad)/.test(e.navigator.userAgent) && (t.documentElement.classList.add("ios"),
  parseInt(e.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8 && t.documentElement.classList.add("hairline")),
t.addEventListener && (e.addEventListener(i, a, !1),
  t.addEventListener("DOMContentLoaded", a, !1))
}(window);