您好,登錄后才能下訂單哦!
今天小編給大家分享一下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(); //默認跳轉主頁 this.$parent.onPageName({ //調用跳轉頁面方法,name為要切換的頁面 name: 'infoPage' })
this.$parent.onPageName({ //跳轉頁面并攜帶數(shù)據(jù) name: 'addPage' }, { come: 'editPage', batchUni: this.getData.batchUni })
對vue來說index.html是一個總的入口文件,vue是單頁面應用,掛在id為app的div下然后動態(tài)渲染路由模板。
單頁面應用是和多頁面應用相對而言的。多頁面應用是在每次頁面跳轉的時候,后臺服務器都重新生成一張html頁面,首屏時間快(只需要加載一次html),搜索引擎優(yōu)化效果好(html內容都在),但是切換慢(每次頁面切換都需要發(fā)出一次http請求)。
單頁面應用首次加載時會請求一次html,隨后的頁面渲染都依靠js動態(tài)的將當前頁面的內容清除掉(原理:js可以感知url的變化),然后將下一個頁面的內容掛載到當前頁面上(前端實現(xiàn),不是后端,無http發(fā)送時延),首屏慢,搜索引擎優(yōu)化效果差,但是切換快。
手機端自適應使用(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如何使用”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。