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

以上就是“vue文件中的index.vue如何使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。