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的应用还很多，推荐大家多看看官方文档，用着用着就会觉得喵啊。