vue单页面和多页面的区别(vue多单页面多tab)
大家好!今天让创意岭的小编来大家介绍下关于vue单页面和多页面的区别的问题,以下是小编对此问题的归纳整理,让我们一起来看看吧。
开始之前先推荐一个非常厉害的Ai人工智能工具,一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等
只需要输入关键词,就能返回你想要的内容,越精准,写出的就越详细,有微信小程序端、在线网页版、PC客户端
创意岭作为行业内优秀的企业,服务客户遍布全球各地,如需了解SEO相关业务请拨打电话175-8598-2043,或添加微信:1454722008
本文目录:
一、web前端开之网站搭建框架之vue详解
网站搭建框架之vue
Vue是web前端快速搭建网站的框架之一。它与jQuery有所不同,是以数据驱动web界面(以操作数据改变页面,而jQuery是以操作节点来改变页面),同时,vue还实现了数据的双向绑定,可及时响应用户的输入。最主要的是vue的写法简单,容易掌握,组件形式可以大大提高工作效率。
对于vue的使用可以分为两种使用形式:1.引入vue.js文件,在js中将vue实例化;2.通过node安装第三方包--vue,搭建脚手架,用脚手架将页面分成几个组件编写,从而利用组件来搭建页面。
引入vue.js的写法
Vue分为V层(视图层)和M层(数据层),一般都是由M层的数据来驱动V层的改变。而vue的常用指令数量不多且写法简单。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是将数据写进标签内,但它们的不同之处在于v-text会将标签当做文本内容写入
,而v-html则会对标签进行编译,只显示标签内的内容。
至于v-show、v-if、v-else这三个指令都是通过布尔值的判断来执行的,当布尔值为真时,设置了v-show、v-if指令的标签会显示出来,当布尔值为假时,标签隐藏;而v-else与这两个指令相反。除此之外,v-show和v-if、v-else之间也有差别,v-show是改变标签的display属性来使标签显示或隐藏;而v-if、v-else是通过添加或删除节点,来显示或隐藏标签的。
V-for是vue的一种遍历方法,这个方法极大的简化了数组或对象的遍历并显示到页面的步骤
而v-bind:是对html属性或自定义属性的数据驱动方式,格式为v-bind:href,可简写为:href。对于类(class)的操作是通过布尔值来判断增加或者隐藏类,同时。类和样式(style)所接受的数据类型为对象。
V-model指令的作用是将数据进行双向绑定,仅限于输入类型标签。当用户在页面输入时,数据层的数据会跟着改变。这是VM模式。由v驱动m。
除了这些普通的指令之外,还有事件指令v-on:,可简写为@+事件名,例如:@click,并将执行函数写到vue的methods中
通过脚手架来写项目的话,可用通过写组件,再将组件引入(注册)到另一个vue文件里拼接在一起,从而构建出一个页面。
(组件书写格式)
(组件整合)
(注册路由)
路由是通过vue-router来实现的,在注册路由的时候要将router实例化。不同的路由跳转不同的页面,这是搭建单页面应用的优势。
而父组件与子组件之间的通讯可以通过props将父组件的信息传递给子组件,改变子组件的内容,这样子组件的复用就不会有障碍了,而子组件传递信息给父组件或者其他组件的通讯则需vuex。
通过引入vuex并实例化一个Vuex.Store作为一个公共平台,将数据进行传输。通过vue的computed方法接收数据,通过methods方法改变数据。而这个公用平台可以实现组件与组件之间的信息传递,从而实现组件之间的交互。
通过一个星期的实战,深深的体会到了vue的优势,在构建移动端这方面的效率很高。但在搭建的过程中,还是少不了与jQuery结合,毕竟每个工具都有其优点,择其优而用是明智的选择。
二、vue-router只能在vue中使用吗
vue-router只能在vue中使用。router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。
三、vue预渲染插件 prerender-spa-plugin(seo优化,生成多页面)
vue等框架打包的项目一般为SPA应用,而单页面是不利于SEO的,现在的解决方案有两种:
注意:
然后在webpack.prod.conf.js里面添加:
在webpack.prod.conf.js的plugins里面添加:
最后在main.js里面修改:
安装:
在main.js引入:
在vue页面中配置:
四、Vue多标签页应用解决方案
应用系统中需要运用到多标签页,跟浏览器一样的效果,在新打开页面后,动态追加一个页签,点击页签可以切换系统主页面区域的内容,且保持内容不刷新,如果关闭页签再通过菜单打开,重新加载。jQuery年代的解决方案就是ifream,但是在Vue.js的单页面应用中,都是组件化开发了,实现多标签页解决的问题就聚焦在关于组件实例的缓存和销毁,下边讲述两种实现多标签页系统的技术实现方案。
Vue Router是官方的路由管理器,跟Vue.js深度集成,确实很强,更多的功能不意义阐述,详情请参考 Vue Router 官方文档
当我们跳转一个新的路由时,可能是点击菜单,也可能是点击发生跳转,这时候路由会发生切换,我们都希望打开一个新的页签,并且这个页签并处于激活状态,当打开多个时,可以切换页签的激活状态,同时路由组件区域(页面内容)发生变化,始终展示激活页签对应的内容。
一个组件展示所有的标签页,并标识出来哪个是激活状态,标签页数据需要在菜单等地方实现追加,我们优先选择数据存在Vuex中,由标签页组件实现切换激活标签和删除标签,添加标签页也可以在该组件内实现,需要对路由进行监听,路由发生调用Vuex中的增加函数,函数对路由数据进行过滤,这样就可以实现路由变化时,标签页数据的变化。
在<router-view/> 外层包裹 <keep-alive>具体原理参考 在动态组件上使用 keep-alive
这个时候,在你切换渲染不同路由的时候,确实好使,组件的状态数据、表单填写的内容等也会被缓存,好像这么简单都直接解决了,当然不可能,这么简单就没必要写这篇文章。
当你更改路由参数的时候,你会发现参数变化的时候,不太好使了,会把之前缓存的这个组件销毁重新加载, 一个组件只能被缓存一个 ,我们希望的肯定是参数不一样时,应该分开都缓存,比如一些明细页面,我们需要看多个客户、多个工单,不应该每次切换都是在重新加载。
关闭页签时,我们更换路由,实现跳转,当再次访问这个路由时,组件未重新加载,这个就不符合正常的使用习惯,关闭页签就应该啥都没了,所以缓存啥的应该都没了。
组件有没有缓存可以通过DevTools调试查看
这样看起来,好像才是真的解决了所有的问题,但是还是有bug,有瑕疵, 解决方案2 中提到的一大堆过程的前提是 destroy ,只有组件进入 destroy 才满足 解决方案2 的方法,但是如果页签没有激活,keep-alive中就已经是停用了这个组件,关闭页签时,路由是没有变化的,keep-alive对各个组件也并没有发生启用和停用,只是改变了Vuex中 visitedViews 的数据,所以关键问题是只要 visitedViews 发生变化,需要把减少的那个组件给卸载掉。
至此,卸载这个活儿终于完成了,无论是怎么关闭页签,都可以完成组件的卸载,切换页签不卸载。感觉完美无瑕,可现实总是那么残酷,关闭页签后,再打开,切换页签时,这个组件 居然刷新了 ,明明关闭前,切换是不刷新的,关闭再打开后,就会刷新了,难道不会缓存了?看一下DevTools调试,懵了。。。
<keep-alive> 添加 include ,Vuex获取当前打开页签的组件名(如:visitedName),include=visitedName;针对传参数的页面,添加 watch ,监听Vuex中标签页的变化,当有变化时判断是否包含当前组件,没有时卸载当前组件,当组件不需要传参时可以不添加watch,include不缓存时组件将会被卸载。
注意: 页面组件必须写name,声明组件名称
以上就是关于vue单页面和多页面的区别相关问题的回答。希望能帮到你,如有更多相关问题,您也可以联系我们的客服进行咨询,客服也会为您讲解更多精彩的知识和内容。
推荐阅读: