快捷導(dǎo)航

關(guān)于vue文件中index.vue的使用方法

更新時間：2022年10月20日 17:01:42 作者：Gordon-Liu

這篇文章主要介紹了關(guān)于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() {		//監(jiān)聽顯示哪個頁面
      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();	//默認跳轉(zhuǎn)主頁

this.$parent.onPageName({	//調(diào)用跳轉(zhuǎn)頁面方法，name為要切換的頁面
  name: 'infoPage'
})

this.$parent.onPageName({	//跳轉(zhuǎn)頁面并攜帶數(shù)據(jù)
  name: 'addPage'
}, {
  come: 'editPage',
  batchUni: this.getData.batchUni
})

vue的index.html總結(jié)

為啥要有index.html

對vue來說index.html是一個總的入口文件，vue是單頁面應(yīng)用，掛在id為app的div下然后動態(tài)渲染路由模板。

單頁面應(yīng)用

單頁面應(yīng)用是和多頁面應(yīng)用相對而言的。多頁面應(yīng)用是在每次頁面跳轉(zhuǎn)的時候，后臺服務(wù)器都重新生成一張html頁面，首屏?xí)r間快（只需要加載一次html），搜索引擎優(yōu)化效果好（html內(nèi)容都在），但是切換慢（每次頁面切換都需要發(fā)出一次http請求）。

單頁面應(yīng)用首次加載時會請求一次html，隨后的頁面渲染都依靠js動態(tài)的將當(dāng)前頁面的內(nèi)容清除掉（原理：js可以感知url的變化），然后將下一個頁面的內(nèi)容掛載到當(dāng)前頁面上（前端實現(xiàn)，不是后端，無http發(fā)送時延），首屏慢，搜索引擎優(yōu)化效果差，但是切換快。

index.html實戰(zhàn)代碼匯總

手機端自適應(yīng)使用（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);

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: