![9e3cc32dc67241de250703af3c7d484e.png](https://i-blog.csdnimg.cn/blog_migrate/bdd2a8a71e267a8aecdcebb5e9846aa4.jpeg)
路由的进阶部分其实内容不多,但都是需要仔细想,深入学的东西,所以我这里也就是个抛砖引玉的效果,真正用到实际项目的还是需要多练习,真正上手才能知道如何使用、优化、高效开发。
话不多说,今天是路由的最后一部分了,这个章节的内容包括:数据获取、路由滚动和懒加载。
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');
![6128b67248503ad56017228ee7d66ce7.gif](https://i-blog.csdnimg.cn/blog_migrate/ffa6d2428e7daf78587452fb253ab922.gif)
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 的,不过我随性么,哈哈。