路由组件传参
我们通常把路由直接映射（绑定）的组件称为 路由组件，也只有路由组件才能直接调用路由有关对象：`$router`、`$route`
当我们一个组件即希望作为路由组件使用，又可能作为功能组件（某个页面中的一部分）去使用，这个时候路由组件传参的方式
来做到这点
案例
我们对 item.vue 组件进行改造，当我们在 home.vue 的商品列表上移入移出，出现商品信息提示层
默认处理
对象模式的
我们也可以有选择的返回 props
回调函数模式
也可以使用回调函数模式
路由数据获取
有的时候，进入某个路由以后，我们需要从服务端获取数据，比如 `/item/:itemId` ，通常，我们有两种方式来实现
1.导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据，在数据获取期间显示加载中之类的 loading 提示
2.导航完成之前获取：导航完成之前，在路由进入的守卫中获取数据，在数据获取成功以后执行导航。
这两种方式都没有任何问题（对错、好坏），自行选择
导航完成之后获取
课堂演示
案件演示
导航完成之前获取（路由生命周期获取）
课堂演示
案件演示
扩展 - nprogress（路由进度条效果）
http://ricostacruz.com/nprogress/
安装
npm i nprogress
OR
yarn add nprogress
index.js路由全局里
路由动效（页面加载透明度变化-渐进）
利用 `transition` 组件，我们还可以给路由导航加上动效
滚动行为（新页面滚动条能回到页面顶部）
前端路由并没有重载整个浏览器，只是通过 DOM 进行了局部更新。所以，有的时候，浏览器的一只状态会被保持，比如 滚动条，
当我们在一个页面中滚动滚动条，然后跳转到另外一个页面，滚动条会保持在上一个页面中，我们其实更希望滚动条能回到页面顶部，
就像重载了整个页面一样
const router = new VueRouter({
routes: [...],
scrollBehavior: () => ({ y: 0 })
});
后退/前进（回到上一页浏览状态）
正对 后退/前进 行为，会提供一个 `savedPosition` 参数，通过该参数返回历史记录中的滚动值
scrollBehavior (to, from, savedPosition) {
// console.log(savedPosition)
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
路由元信息
定义路由的时候可以配置 `meta` 字段
通过 `meta` 定义要验证的路由
或者
路由懒加载（按需加载）
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当
路由被访问的时候才加载对应组件，这样就更加高效了
2.html
a.js
b.js
网友评论