vue使用感受(二)组件间跳转

昨天我们聊了一下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写了什么。

这边定义了一个 '/' 路径,也就是根目录。表示的是元信息(这个在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

这里说我们可以把组件定义成一个工厂函数。当组件需要渲染的时候触发工厂函数,并且把结果缓存起来,之后再次渲染的时候可以用。这个工厂函数接收一个的回调,在收到从服务器下载的组件定义时调用。你可以在工厂函数中返回一个。当使用局部注册时,也可以直接提供一个返回Promise的函数。

好的上面这段话是官网上的,我盯着看了好久,有种似懂非懂的感觉。百度之后的结果:

工厂函数就是当我调用这个函数时,实际上是先利用类创建了一个对象,然后返回这个对象。

对象代表异步操作最终完成或者失败的对象。它是某个函数返回的对象,你可以把回掉函数绑定在这个对象上。

用了promise之后

或者直接把promise藏起来

之前我们在component那边看到的resolve就是promise对象的一个方法,意思是将当前执行状态改为resolved,并触发绑定的所有成功的回调函数。

=>箭头函数,相当于匿名函数。如果我们把上面这句用一般的方式写的话,应该是下面这样。也就是箭头前面的resolve是传递给函数的参数,而箭头后面则是函数返回的值。这边是一个require方法。

require.js是一个JS模块的载入框架,也就是实际上我们按需加载所用到的方法。这个框架使用的是AMD模块规范(Asynchronous Module Definition),也就是异步模块定义。

格式:require([module], callback)

是不是和我们上面return那句很像?也就是说是我们要加载的模块,是我们的回调函数。不过在ES6中上面这个和import语句是等价的。

好了,解释了一堆,我们最后发现结果平平无奇。

也就是我们在定义路径component的位置引入了需要的组件,而不是在文件一开始把所有的都引入。

路由跳转

话说回来,我们想要的是组件间跳转。我们在写好router.js这个文件之后,我们需要修改一下main.js这个文件。

接下来我们看一下app.vue,也就是我们所有组件的容器。这个组件我们在main.js里面也引入了。这边的标签可以渲染路径匹配到的组件。

我们之前在router.js里面定义了这个根目录对应的组件是index.vue,那么这个index组件就会被加载到标签的位置。如果说我们网页运行的地址是,那么我们在访问这个地址的时候出来的就是app.vue组件中嵌套着index.vue组件的样子。

如果我们的第一个页面是登录页,登录按钮点击后跳转到主页面,应该怎么做呢?这里涉及到路由的跳转。我们假设我们有两个组件login.vue和index.vue。我们希望用户访问根目录的时候看到的是登录页,点击后跳转到这个路径。那么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的应用还很多,推荐大家多看看官方文档,用着用着就会觉得喵啊。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180327G1924S00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券