狐狸窝

vue使用感受（二）组件间跳转

2018-3-27

昨天我们聊了一下vue的组件间传值，今天来讨论下我遇到的第二个问题组件间跳转。在不使用前端框架的时候，如果我们要点击菜单跳转到指定页面，一般来说可以使用<a>标签或者在页面中嵌套iframe。前者可以改变页面路径或者通过锚点来跳转到页面指定位置，后者则是在页面中嵌套一个子页面，可以部分刷新，改变内容。不过HTML5已经不再支持iframe了，所以要做到部分页面跳转等功能，我们可以借助一下vue。

前言

在vue这边，如果要跳转页面一般是借助vue-router的，也就是路由。但是路由跳转到不同地址时，会使得页面刷新。如果页面中包含Header、Footer等不需要刷新的组件，用户可能还是会看到闪了一下，或者加载时候的空白。所以我们需要在不改变路由路径的情况下，替换页面部分组件。我找到的方法是使用<component>标签。如果有大佬有其他方法可以留言告诉我~

接下来我们就从这两种情况分别谈一谈。

vue-router

vue的一大特色就是文档写得很好，许多问题我们都可以在文档上找到答案。对于vue-router也是有一个很完善的文档的，大家可以先去那边看看。安装的步骤我这边也不提了。

https://router.vuejs.org/zh-cn/

我就举一下我做的测试系统的例子。在安装完成之后我们在src文件夹下创建一个router.js的文件。如果你使用的是我之前推荐的iView的工程，那这个文件已经建好了。

PS：router.js这个文件的名字其实可以根据你的喜好来改的，只要你在main.js中引入的时候和这个名字一致就可以了。不过狐狸还是推荐你用带有router字眼的文件名，这样在多人开发的时候，其他小伙伴可以比较容易理解。

我们先看一下iView那个工程中的router.js写了什么。

const routers = [
  {
    path: '/',
    meta: {
      title: ''
    },
    component: (resolve) => require(['./views/index.vue], resolve)
  }
];

export default routers;

这边定义了一个 ‘/’ 路径，也就是根目录。meta表示的是元信息（这个在MC mod开发中也有），我觉得就是这个路径带着的一个字段，可以在下面进行一些对路由的判断或其他处理。第三个是component，也就是这个路径对应的组件。这边的写法被称作路由懒加载，也就是在这个路由被访问的时候才加载对应的组件。在这里，加载的组件是views文件夹下面的index组件。如果不需要懒加载的话，我们可以写成这样。meta如果用不到的话也可以去掉。

import Index from './views/index.vue'

const routers = [
  {
    path: '/',
    component: Index
  }
]

export default routers;

路由懒加载

虽然我们可以选择不用这个，但是既然出现在那里就很在意啊。那个=>看起来很高端的样子，我们就岔开来单独看看这些到底是啥。首先，我们还是看一看官方文档。

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对象代表异步操作最终完成或者失败的对象。它是某个函数返回的对象，你可以把回掉函数绑定在这个对象上。
//以前的回调函数
function successCallback(result) {
  console.log("成功：" + result)
}

function failureCallback(error) {
  console.log("失败：" + error)
}

doSomething(successCallback, failureCallback)

用了promise之后

const promise = doSomething()
promise.then(successCallback, failureCallback)

或者直接把promise藏起来

doSomething().then(successCallback, failureCallback)

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

component: (resolve) => require(['./views/index.vue'],resolve)
  • =>箭头函数，相当于匿名函数。如果我们把上面这句用一般的方式写的话，应该是下面这样。也就是箭头前面的resolve是传递给函数的参数，而箭头后面则是函数返回的值。这边是一个require方法。
function (resolve) {
  return require(['./views/index.vue'], resolve);
}
  • require.js是一个JS模块的载入框架，也就是实际上我们按需加载所用到的方法。这个框架使用的是AMD模块规范（Asynchronous Module Definition），也就是异步模块定义。
格式：require([module], callback)

是不是和我们上面return那句很像？也就是说./views/index.vue是我们要加载的模块，resolve是我们的回调函数。不过在ES6中上面这个和import语句是等价的。

import index from './views/index.vue'
//等价于
var list = require('./list')

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

2-9

2-10

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

路由跳转

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

import Vue from 'vue'
import VueRouter from 'vue-router'
import routers from './router'
import App from './app'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: routers
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

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

<template>
  <div class="layout">
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data () {
    }
  }
</script>

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

如果我们的第一个页面是登录页，登录按钮点击后跳转到主页面，应该怎么做呢？这里涉及到路由的跳转。我们假设我们有两个组件login.vue和index.vue。我们希望用户访问localhost:8080的时候看到的是登录页，点击后跳转到localhost:8080/home这个路径。那么router.js可以这样写。

const routers = [
  {
    path: '/',
    name: 'login',
    component: (resolve) => require(['./views/login.vue'], resolve)
  },{
    path: '/home',
    name: 'home',
    component: (resolve) => require(['./views/index.vue'], resolve)
  }
];
export default routers;

我们需要在login这个组件中为登录按钮绑定一个点击事件。

<template>
  <div class="login">
    <Button @click="login"></Button>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    login () {
      this.$router.push({
        name: 'home'
      })
    }
  }
}
</script>

这个login方法中就是一个路由跳转的方法，具体的使用方法请参考官方文档。

其他动态切换组件的方式

vue-router基本上能满足大多数的情况，但如果我们的界面上有很多菜单项，点击之后都希望页面中的一部分产生变化，但是又不希望改变路径的话，vue-router可能就满足不了了。

PS：如果有可以用router实现的方式，请大佬指正~

vue自带一个<component></component>标签，里面有一个动态绑定的is属性，我们可以动态的选择加载哪一个组件。比如说我们有一个这样的页面。

2-11

我们的Footer中有两个按钮，主页和通讯录。我们希望我们在点击按钮时，Content部分的组件变化，但是Header和Footer部分不变，路由也不变。那么我们可以在Content中放入component标签。（Header部分代码我就不写了）

<template>
  <div class="layout">
    <Layout>
      <Header></Header>
      <Content>
        <component v-bind:is="tabView"></component>
      </Content>
      <Footer>
        <hr>
        <div class="btnBottom">
          <Button type="text" @click="setPage(1)">
            <Icon type="ios-home" size="24" />
            <div class="iconText">首页</div>
          </Button>
          <Button type="text" style="float:right;" @click="setPage(2)">
            <Icon type="person-stalker" size="24" />
            <div class="iconText">通讯录</div>
          </Button>
        </div>
      </Footer>
    </Layout>
  </div>
</template>
<script>
  import MainPage from './children/MainPage'
  import ContactsPage from './children/ContactsPage'

  export default {
    data () {
      return {
        tabView: 'MainPage'
      }
    },
    methods: {
      setPage (data) {
        // 1:首页，2:通讯录
        if (data == 1) {
          this.tabView = 'MainPage'
        } else if (data == 2) {
          this.tabView = 'ContactsPage'
        }
      }
    },
    components: {
      MainPage,
      ContactsPage
    }
  }
</script>

当我们点击首页时，触发setPage方法，把tabView的值设置为MainPage。而tabView动态绑定is属性，这样component标签就会显示MainPage组件的内容了。通讯录同理。

以上就是我目前涉及的组件间跳转的内容。vue-router的应用还很多，推荐大家多看看官方文档，用着用着就会觉得喵啊。

←