vue 固定div 滚动_Vue.js从零开始——路由（5）

路由的进阶部分其实内容不多，但都是需要仔细想，深入学的东西，所以我这里也就是个抛砖引玉的效果，真正用到实际项目的还是需要多练习，真正上手才能知道如何使用、优化、高效开发。

话不多说，今天是路由的最后一部分了，这个章节的内容包括：数据获取、路由滚动和懒加载。

---

1 数据获取

有时候，进入某个路由后，需要从服务器获取数据，例如，在渲染用户信息时，需要从服务器获取用户的数据。

我们可以通过两种方式来实现：

• 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据；在数据获取期间显示“加载中”之类的指示
• 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航

从技术角度讲，两种方式都不错 —— 就看我们想要的用户体验是哪种。

1.1 导航完成后获取数据

当使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据，这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

假设我们有一个 Post 组件，需要基于 $route.params.id 获取文章数据，首先是 HTML：

<template>
  <div class="post">
    <div v-if="loading" class="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

Vue：

export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData();
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null;
      this.loading = true;
      // 将 getPost 替换为我们从 util / API 获取到的数据
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false;
        if (err) {
          this.error = err.toString();
        } else {
          this.post = post;
        }
      });
    }
  }
}

1.2 在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据；我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法：

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post));
    })
  },
  // 路由改变前，组件就已经渲染完了
  // 逻辑稍稍不同
  beforeRouteUpdate (to, from, next) {
    this.post = null;
    getPost(to.params.id, (err, post) => {
      this.setData(err, post);
      next();
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString();
      } else {
        this.post = post;
      }
    }
  }
}

在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示；如果数据获取失败，同样有必要展示一些全局的错误提醒。

当然这些内容都很容易了，就不赘述了。

2 路由滚动

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样； vue-router 能做到，而且更好，它让我们可以自定义路由切换时页面如何滚动。

注意：这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例，我们可以提供一个 scrollBehavior 方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
});

scrollBehavior 方法接收 to 和 from 路由对象，第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

这个方法返回滚动位置的对象信息，长这样：

• { x: number, y: number }
• { selector: string, offset? : { x: number, y: number }}

如果返回一个 falsy (注：falsy 不是 false，参考这里)的值，或者是一个空对象，那么不会发生滚动。

举例：

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 };
}

对于所有路由导航，简单地让页面滚动到顶部。

返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition;
  } else {
    return { x: 0, y: 0 };
  }
}

如果要模拟“滚动到锚点”的行为，则可以：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

我们还可以利用路由元信息更细颗粒度地控制滚动，等等。

2.1 完整样例

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const Home = { template: '<div class="home">home</div>' };
const Foo = { template: '<div class="foo">foo</div>' };
const Bar = {
  template: `
    <div class="bar">
      bar
      <div style="height:1500px"></div>
      <p id="anchor" style="height:500px">Anchor</p>
      <p id="anchor2" style="height:500px">Anchor2</p>
      <p id="1number">with number</p>
    </div>
  `
};

// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = function (to, from, savedPosition) {
  if (savedPosition) {
    // savedPosition is only available for popstate navigations.
    return savedPosition;
  } else {
    const position = {};

    // scroll to anchor by returning the selector
    if (to.hash) {
      position.selector = to.hash;

      // specify offset of the element
      if (to.hash === '#anchor2') {
        position.offset = { y: 100 };
      }

      // bypass #1number check
      if (/^#d/.test(to.hash) || document.querySelector(to.hash)) {
        return position;
      }

      // if the returned position is falsy or an empty object,
      // will retain current scroll position.
      return false;
    }

    return new Promise(resolve => {
      // check if any matched route config has meta that requires scrolling to top
      if (to.matched.some(m => m.meta.scrollToTop)) {
        // coords will be used if no selector is provided,
        // or if the selector didn't match any element.
        position.x = 0;
        position.y = 0;
      };

      // wait for the out transition to complete (if necessary)
      this.app.$root.$once('triggerScroll', () => {
        // if the resolved position is falsy or an empty object,
        // will retain current scroll position.
        resolve(position);
      });
    });
  }
};

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  scrollBehavior,
  routes: [
    { path: '/', component: Home, meta: { scrollToTop: true }},
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar, meta: { scrollToTop: true }}
  ]
});

new Vue({
  router,
  template: `
    <div id="app">
      <h1>Scroll Behavior</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/foo">/foo</router-link></li>
        <li><router-link to="/bar">/bar</router-link></li>
        <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
        <li><router-link to="/bar#anchor2">/bar#anchor2</router-link></li>
        <li><router-link to="/bar#1number">/bar#1number</router-link></li>
      </ul>
      <transition name="fade" mode="out-in" @after-leave="afterLeave">
        <router-view class="view"></router-view>
      </transition>
    </div>
  `,
  methods: {
    afterLeave () {
      this.$root.$emit('triggerScroll');
    }
  }
}).$mount('#app');

2.2 异步滚动

我们也可以返回一个 Promise 来得出预期的位置描述：

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 });
    }, 500);
  });
}

官方的仅仅提供了该接口，并没有提供完整的解决方法，所以我们可以配合其他工具，或者原生 JavaScript 来使用，他们的原话是：

将其挂载到从页面级别的过渡组件的事件上，令其滚动行为和页面过渡一起良好运行是可能的。但是考虑到用例的多样性和复杂性，我们仅提供这个原始的接口，以支持不同用户场景的具体实现。

3 路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载；这时我们可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

我们可以结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

首先，可以将异步组件定义为返回一个 Promise 的工厂函数（该函数返回的 Promise 应该 resolve 组件本身）：

const Foo = () => Promise.resolve({
  /* 组件定义对象 */ 
});

第二，在 Webpack 中，我们可以使用动态 import语法来定义代码分块点（split point）：

import('./Foo.vue'); // 返回 Promise

注意：如果使用的是 Babel，我们必需添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

const Foo = () => import('./Foo.vue');

在路由配置中什么都不需要改变，只需要像往常一样使用 Foo 这个已定义组件即可：

const router = new VueRouter({
   routes: [ { path: '/foo', component: Foo } ] 
});

把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块（chunk）中，只需要使用 href="https://webpack.js.org/guides/code-splitting-require/#chunkname">命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack 2.4 +)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue');
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue');
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue');

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

---

有关 Vue Router （路由）的部分就这样结束了，接下来我把 Vuex 这个部分大概的过一下——因为 Vue.js 3.0 的确分了我很多精力去重新学习，而且 Vuex 我个人用的不多——之后就开坑 Web API 了，也就是之前跳过去的类似 Canvas、SVG、地理 API 等等；然后就是 Node.js……

我感觉我的顺序一定是反了，本来应该先开 Node.js 再来说 Vue.js 的，不过我随性么，哈哈。