目录Vue文件中index.vue使用vue的index.html总结为啥要有index.html单页面应用index.html实战代码汇总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是一个总的入口文件,vue是单页面应用,挂在id为app的div下然后动态渲染路由模板。
单页面应用是和多页面应用相对而言的。多页面应用是在每次页面跳转的时候,后台服务器都重新生成一张html页面,首屏时间快(只需要加载一次html),搜索引擎优化效果好(html内容都在),但是切换慢(每次页面切换都需要发出一次Http请求)。
单页面应用首次加载时会请求一次html,随后的页面渲染都依靠js动态的将当前页面的内容清除掉(原理:js可以感知url的变化),然后将下一个页面的内容挂载到当前页面上(前端实现,不是后端,无http发送时延),首屏慢,搜索引擎优化效果差,但是切换快。
手机端自适应使用(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);
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: 关于vue文件中index.vue的使用方法
本文链接: https://www.lsjlt.com/news/169818.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0