如何正确使用vue文件中的index.vue组件？

本文共计908个文字，预计阅读时间需要4分钟。

目录：Vue 文件中使用 index.vue内容：在 Vue 文件中，index.vue 被用于整合 Vue 应用的入口文件。使用 index. 总结，因为它是单页面应用的入口页面。index. 的作用是加载和渲染 Vue 应用的根组件。以下是 index. 的代码实现和 index.vue 的使用方法：

为什么要有 index.：- 单页面应用（SPA）需要一个入口页面来加载和初始化应用。- index. 作为根页面，可以包含必要的 HTML 结构和资源链接。

index. 实现代码： Vue App

index.vue 使用方法：vue

组件缓存：- 使用 `keep-alive` 组件来缓存不活动的组件实例，避免重复渲染。

页面条件渲染：- 使用 `v-if` 指令来根据 `pageName` 的值决定是否渲染特定的路由视图。

目录

• 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总结

为啥要有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);

以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。