关于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);
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/weixin_46547740/article/details/116924
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25