vue中局部页面跳转_vue使用感受(二)组件间跳转
想要看代码高亮的可以去我的微信公众号(pearapple_2015)查看。
昨天我们聊了一下vue的组件间传值,今天来讨论下我遇到的第二个问题组件间跳转。在不使用前端框架的时候,如果我们要点击菜单跳转到指定页面,一般来说可以使用标签或者在页面中嵌套iframe。前者可以改变页面路径或者通过锚点来跳转到页面指定位置,后者则是在页面中嵌套一个子页面,可以部分刷新,改变内容。不过HTML5已经不再支持iframe了,所以要做到部分页面跳转等功能,我们可以借助一下vue。
前言
在vue这边,如果要跳转页面一般是借助vue-router的,也就是路由。但是路由跳转到不同地址时,会使得页面刷新。如果页面中包含Header、Footer等不需要刷新的组件,用户可能还是会看到闪了一下,或者加载时候的空白。所以我们需要在不改变路由路径的情况下,替换页面部分组件。我找到的方法是使用标签。如果有大佬有其他方法可以留言告诉我~
接下来我们就从这两种情况分别谈一谈。
vue-router
vue的一大特色就是文档写得很好,许多问题我们都可以在文档上找到答案。对于vue-router也是有一个很完善的文档的,大家可以先去那边看看。安装的步骤我这边也不提了。https://router.vuejs.org/zh-cn/
我就举一下我做的测试系统的例子。在安装完成之后我们在src文件夹下创建一个router.js的文件。如果你使用的是我之前推荐的iView的工程,那这个文件已经建好了。PS:router.js这个文件的名字其实可以根据你的喜好来改的,只要你在main.js中引入的时候和这个名字一致就可以了。不过狐狸还是推荐你用带有router字眼的文件名,这样在多人开发的时候,其他小伙伴可以比较容易理解。
我们先看一下iView那个工程中的router.js写了什么。
这边定义了一个'/'路径,也就是根目录。meta表示的是元信息(这个在MC
mod开发中也有),我觉得就是这个路径带着的一个字段,可以在下面进行一些对路由的判断或其他处理。第三个是component,也就是这个路径对应的组件。这边的写法被称作路由懒加载,也就是在这个路由被访问的时候才加载对应的组件。在这里,加载的组件是views文件夹下面的index组件。如果不需要懒加载的话,我们可以写成这样。meta如果用不到的话也可以去掉。
路由懒加载
虽然我们可以选择不用这个,但是既然出现在那里就很在意啊。那个=>看起来很高端的样子,我们就岔开来单独看看这些到底是啥。首先,我们还是看一看官方文档。https://router.vuejs.org/zh-cn/advanced/lazy-loading.html
官方文档里面说要结合Vue的异步组件和Webpack的代码分割功能。那我们先来看看异步组件。https://cn.vuejs.org/v2/guide/components.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6
这里说我们可以把组件定义成一个工厂函数。当组件需要渲染的时候触发工厂函数,并且把结果缓存起来,之后再次渲染的时候可以用。这个工厂函数接收一个resolve的回调,在收到从服务器下载的组件定义时调用。你可以在工厂函数中返回一个Promise。当使用局部注册时,也可以直接提供一个返回Promise的函数。
好的上面这段话是官网上的,我盯着看了好久,有种似懂非懂的感觉。百度之后的结果:工厂函数就是当我调用这个函数时,实际上是先利用类创建了一个对象,然后返回这个对象。
Promise对象代表异步操作最终完成或者失败的对象。它是某个函数返回的对象,你可以把回掉函数绑定在这个对象上。
用了promise之后
或者直接把promise藏起来
之前我们在component那边看到的resolve就是promise对象的一个方法,意思是将当前执行状态改为resolved,并触发绑定的所有成功的回调函数。=>箭头函数,相当于匿名函数。如果我们把上面这句用一般的方式写的话,应该是下面这样。也就是箭头前面的resolve是传递给函数的参数,而箭头后面则是函数返回的值。这边是一个require方法。require.js是一个JS模块的载入框架,也就是实际上我们按需加载所用到的方法。这个框架使用的是AMD模块规范(Asynchronous Module Definition),也就是异步模块定义。格式:require([module], callback)
是不是和我们上面return那句很像?也就是说./views/index.vue是我们要加载的模块,resolve是我们的回调函数。不过在ES6中上面这个和import语句是等价的。
好了,解释了一堆,我们最后发现结果平平无奇。
也就是我们在定义路径component的位置引入了需要的组件,而不是在文件一开始把所有的都引入。
路由跳转
话说回来,我们想要的是组件间跳转。我们在写好router.js这个文件之后,我们需要修改一下main.js这个文件。
接下来我们看一下app.vue,也就是我们所有组件的容器。这个组件我们在main.js里面也引入了。这边的标签可以渲染路径匹配到的组件。
我们之前在router.js里面定义了'/'这个根目录对应的组件是index.vue,那么这个index组件就会被加载到标签的位置。如果说我们网页运行的地址是localhost:8080,那么我们在访问localhost:8080这个地址的时候出来的就是app.vue组件中嵌套着index.vue组件的样子。
如果我们的第一个页面是登录页,登录按钮点击后跳转到主页面,应该怎么做呢?这里涉及到路由的跳转。我们假设我们有两个组件login.vue和index.vue。我们希望用户访问localhost:8080的时候看到的是登录页,点击后跳转到localhost:8080/home这个路径。那么router.js可以这样写。
我们需要在login这个组件中为登录按钮绑定一个点击事件。
这个login方法中就是一个路由跳转的方法,具体的使用方法请参考官方文档。
其他动态切换组件的方式
vue-router基本上能满足大多数的情况,但如果我们的界面上有很多菜单项,点击之后都希望页面中的一部分产生变化,但是又不希望改变路径的话,vue-router可能就满足不了了。PS:如果有可以用router实现的方式,请大佬指正~
vue自带一个标签,里面有一个动态绑定的is属性,我们可以动态的选择加载哪一个组件。比如说我们有一个这样的页面。
我们的Footer中有两个按钮,主页和通讯录。我们希望我们在点击按钮时,Content部分的组件变化,但是Header和Footer部分不变,路由也不变。那么我们可以在Content中放入component标签。(Header部分代码我就不写了)
当我们点击首页时,触发setPage方法,把tabView的值设置为MainPage。而tabView动态绑定is属性,这样component标签就会显示MainPage组件的内容了。通讯录同理。
以上就是我目前涉及的组件间跳转的内容。vue-router的应用还很多,推荐大家多看看官方文档,用着用着就会觉得喵啊。
vue中局部页面跳转_vue使用感受(二)组件间跳转相关推荐
- 微信vue路由跳转兼容_vue使用感受(二)组件间跳转
想要看代码高亮的可以去我的微信公众号(pearapple_2015)查看. 昨天我们聊了一下vue的组件间传值,今天来讨论下我遇到的第二个问题组件间跳转.在不使用前端框架的时候,如果我们要点击菜单跳转 ...
- vue中进入页面,自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...
- FullCalendar拖拽日历在vue中单个页面的使用方法
FullCalendar拖拽日历在vue中单个页面的使用方法 1.首先通过npm下载插 npm install --save @fullcalendar/vue @fullcalendar/daygr ...
- 若依前后端分离版(vue)中配置页面跳转的路由
场景 若依前后端分离版本地搭建开发环境并运行项目的教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在此基 ...
- vue 新建的页面如何访问_Vue.js—实现前后端分离架构中前端页面搭建(四)(完)...
[Vue.js实现前后端分离架构中前端页面搭建] 二十.实现服务端登录业务 前提:已经有单机版Eureka,端口8761.启动开Eureka 1. 新建父项目 新建backend_parent. 为了 ...
- vue中tab切换前端实现_vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...
- vue实现局部页面缓存+返回上一页传参
问题说明: 在使用vue开发的过程中难免会遇到这种问题: 1.当我们需要前往另一个页面去做其他操作后,返回上一个页面,上一个页面的状态会被刷新,我们需要让上一个页面的状态保留. 2.当我们返回上一页的 ...
- vue中常碰见的坑_Vue 与 Vuex 的第一次接触遇到的坑
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便 ...
- vue 扫码页面限制区域_Vue.js 单页面多路由区域操作的实例详解
单页面多路由区域操作 在一个页面中有两个及以上的区域,需要通过设置路由的index.js,来操作这些区域的内容 app.vue 中设置: index.js中设置: import vue from 'v ...
最新文章
- 力扣(LeetCode)刷题,简单题(第19期)
- 利用OpenCV 基于Inception模型图像分类
- 一句话后门中eval和assert的区别
- Linux常见使用命令小结
- 关于解决oracle登录:ora-12154:tns:无法解析指定的连接标识符
- 【自动化__持续集成】___java___XML__DOM4操作
- c++现在有一棵合法的二叉树,树的节点都是用数字表示,现在给定这棵树上所有的父子关系,求这棵树的高度
- 不好意思,00后黑客CEO登场了!
- 探索 Python + HyperLPR 进行车牌识别
- Maven学习总结(19)——深入理解Maven相关配置
- sql 获取日期时分秒_sql2000 获取当前日期只要年月日,不要时分秒
- Tomcat各版本说明
- RuoYi-Vue——关于登录后不同角色跳不同页面
- 锐龙R3 3300X和R5 3500X 哪个好
- plsql developer工具栏按钮不见了解决办法
- 【计算机网络】计算机网络总结
- 《Oracle内核技术解密》读书笔记(一)
- TPM分析笔记(七)TPM 模块中的密码算法家族。
- CAD有关建筑、室内设计等方面的基础步骤流程
- Java HashMap的put方法
热门文章
- 安装4.210版本Verilator
- Linux系统基础4
- Mybatis模糊查询
- ESP8266连接OneNet云平台的方法
- python的flask前端显示图片_python 实现Flask中返回图片流给前端展示
- c语言第八章上机答案,C语言程序设计上机指导第8章答案.doc
- word论文中如何任意设置页码?摘要不计页数?目录设置?取消页眉横线?
- BUUCTF:[RoarCTF2019]黄金6年
- 一加5t内核linux,Linux On iPhone 7 现在可运行 Wayland
- 微信小程序云开发学习笔记No.03——(文件存储)