关于vue文件中index.vue的使用方法

 更新时间:2022年10月20日 17:01:42   作者:Gordon-Liu  
这篇文章主要介绍了关于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);

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue打包更新packge.json版本号的全过程

    vue打包更新packge.json版本号的全过程

    这篇文章主要介绍了vue打包更新packge.json版本号的全过程,文章通过图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-08-08
  • 在Vue中如何实现打字机的效果

    在Vue中如何实现打字机的效果

    这篇文章主要介绍了在Vue中如何实现打字机的效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue使用lodash中debounce(防抖函数)的几种方法实现

    vue使用lodash中debounce(防抖函数)的几种方法实现

    本文主要介绍了vue使用lodash中debounce(防抖函数)的几种方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-02-02
  • Vue实现PDF文件预览的方法详解

    Vue实现PDF文件预览的方法详解

    pdf文件预览是开发业务时常见的一个交互,在toB项目中是经常用到的,对于用户上传文件,预览文件等操作时有一个更好的体验,下面我结合实际业务,在vue的基础上与大家分享这个实现方法,需要的朋友可以参考下
    2023-09-09
  • vue使用websocket的方法实例分析

    vue使用websocket的方法实例分析

    这篇文章主要介绍了vue使用websocket的方法,结合实例形式对比分析了vue.js使用websocket的相关操作技巧与注意事项,需要的朋友可以参考下
    2019-06-06
  • Vuex actions 异步操作方法详解

    Vuex actions 异步操作方法详解

    这篇文章主要介绍了Vuex actions 异步操作方法,需要的朋友可以参考下
    2023-10-10
  • 17个vue常用的数组方法总结与实例演示

    17个vue常用的数组方法总结与实例演示

    这篇文章主要介绍了vue中常用的数组方法,包括:VUE数组转换字符串,VUE数组遍历,VUE数组过滤,VUE数组查询,VUE数组排序等功能,需要的朋友可以参考下
    2022-12-12
  • vue中使用TypeScript的方法

    vue中使用TypeScript的方法

    这篇文章主要介绍了vue中使用TypeScript的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08
  • Vue CLI4 Vue.config.js标准配置(最全注释)

    Vue CLI4 Vue.config.js标准配置(最全注释)

    这篇文章主要介绍了Vue CLI4 Vue.config.js标准配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • elementui Select选择器嵌套tree实现TreeSelect方式

    elementui Select选择器嵌套tree实现TreeSelect方式

    这篇文章主要介绍了elementui Select选择器嵌套tree实现TreeSelect方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论