關(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> //引入頁(yè)面文件
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: { //注冊(cè)頁(yè)面
homePage, addPage, infoPage, editPage
},
mounted() {
this.routerPage()
},
watch: {
$route() {
this.routerPage()
}
},
methods: {
routerPage() { //監(jiān)聽顯示哪個(gè)頁(yè)面
let name = this.$route.query.name
if (name) {
this.pageName = name
} else {
this.pageName = 'homePage'
}
},
onPageName(flag = {}, data = {}) { //更改頁(yè)面方法
this.$router.push({
name: 'contract',
query: flag
})
localStorage.iData = JSON.stringify(data)
this.iData = data
}
}
}
</script>
this.$parent.onPageName(); //默認(rèn)跳轉(zhuǎn)主頁(yè)
this.$parent.onPageName({ //調(diào)用跳轉(zhuǎn)頁(yè)面方法,name為要切換的頁(yè)面
name: 'infoPage'
})
this.$parent.onPageName({ //跳轉(zhuǎn)頁(yè)面并攜帶數(shù)據(jù)
name: 'addPage'
}, {
come: 'editPage',
batchUni: this.getData.batchUni
})
vue的index.html總結(jié)
為啥要有index.html
對(duì)vue來說index.html是一個(gè)總的入口文件,vue是單頁(yè)面應(yīng)用,掛在id為app的div下然后動(dòng)態(tài)渲染路由模板。
單頁(yè)面應(yīng)用
單頁(yè)面應(yīng)用是和多頁(yè)面應(yīng)用相對(duì)而言的。多頁(yè)面應(yīng)用是在每次頁(yè)面跳轉(zhuǎn)的時(shí)候,后臺(tái)服務(wù)器都重新生成一張html頁(yè)面,首屏?xí)r間快(只需要加載一次html),搜索引擎優(yōu)化效果好(html內(nèi)容都在),但是切換慢(每次頁(yè)面切換都需要發(fā)出一次http請(qǐng)求)。
單頁(yè)面應(yīng)用首次加載時(shí)會(huì)請(qǐng)求一次html,隨后的頁(yè)面渲染都依靠js動(dòng)態(tài)的將當(dāng)前頁(yè)面的內(nèi)容清除掉(原理:js可以感知url的變化),然后將下一個(gè)頁(yè)面的內(nèi)容掛載到當(dāng)前頁(yè)面上(前端實(shí)現(xiàn),不是后端,無(wú)http發(fā)送時(shí)延),首屏慢,搜索引擎優(yōu)化效果差,但是切換快。
index.html實(shí)戰(zhàn)代碼匯總
手機(jī)端自適應(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);以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue input實(shí)現(xiàn)點(diǎn)擊按鈕文字增刪功能示例
這篇文章主要介紹了vue input實(shí)現(xiàn)點(diǎn)擊按鈕文字增刪功能,涉及基于vue.js的事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
Vue3?中路由Vue?Router?的使用實(shí)例詳解
vue-router是vue.js官方給出的路由解決方案,能夠輕松的管理SPA項(xiàng)目中組件的切換,這篇文章主要介紹了Vue3?中路由Vue?Router?的使用,需要的朋友可以參考下2023-02-02
vue項(xiàng)目實(shí)現(xiàn)搜索內(nèi)容變紅色顯示
這篇文章主要為大家介紹了vue項(xiàng)目實(shí)現(xiàn)搜索內(nèi)容變紅色顯示,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
在vue中通過render函數(shù)給子組件設(shè)置ref操作
這篇文章主要介紹了在vue中通過render函數(shù)給子組件設(shè)置ref操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue實(shí)現(xiàn)圖片轉(zhuǎn)pdf的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片轉(zhuǎn)pdf的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的小伙伴可以跟隨小編一起了解一下2023-08-08
Vue?transition組件簡(jiǎn)單實(shí)現(xiàn)數(shù)字滾動(dòng)
這篇文章主要為大家介紹了Vue?transition組件簡(jiǎn)單實(shí)現(xiàn)數(shù)字滾動(dòng)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
vue+canvas實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)從上到下刷新瀑布圖效果(類似QT的)
這篇文章主要介紹了vue+canvas實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)從上到下刷新瀑布圖效果(類似QT的),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04

