路由页面管理（vue-router）

1.什么是vue-router?

  vue-router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
1/嵌套的路由/视图表
2.模块化的、基于组件的路由配置
3.路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
4.细粒度的导航控制
5.带有自动激活的 CSS class 的链接
6.HTML5 历史模式或 hash 模式，在 IE9 中自动降级
7.自定义的滚动条行为

  vue是单页面开发, 通过改变url跳转到指定的路由组件而不重新加载页面, 减轻服务器负担
这个单页面不刷新后面再说明。
  router-link实际上是渲染成正确的a标签, 结合vue-router的两种模式, 使得去往正确的路由组件
两种模式:
hash模式(默认):
使用url的哈希值来模拟一个url, #也称为锚点, 改变后面的值不会导致重新加载页面
#后面的值只是让浏览器滚到对应的位置, 起到指导作用, 并不会发送http请求
#后面的值改变时会触发hasChange, 更新页面, 但不会重新加载
当处于hash模式会创建hashHistroy对象, 它会做两件事
push新访问的路由到浏览器历史url记录的栈顶
replace替换当前栈顶路由
总而言之:Hash模式就是通过改变#后面的值,实现浏览器渲染指定的组件.
history模式(需要后端配合):
pushState()和replaceState()方法可以应用到浏览记录的增加和替换上, 使得通过历史记录修改url并不会立即像服务端发送请求, 但是缺点就是f5刷新时会访问服务端, 如果服务端没有相关配置, 则会返回404页面, 因此服务端需要配置当匹配不到url时, 去往某个指定页面
总之: History模式就是通过pushState()方法来对浏览器的浏览记录进行修改,来达到不用请求后端来渲染的效果
History模式就是通过pushState()方法来对浏览器的浏览记录进行修改,来达到不用请求后端来渲染的效果.不过建议,实际项目还是使用history模式.

2.$router 和 $route的区别:

$route是整个路由组件, 通过这可以操作所有路由组件, 例如使用push方法像里面添加路由
$route是某个路由实例(当前正处于的), 通过它可以访问跳转过来时的参数, 例如query和params

3.导航守卫(路由的钩子函数):

全局前置守卫(router.beforeEach), 后置守卫(afterEach)
路由独享:beforeEnter
组件内守卫:
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

• 注意before中需要放行next,
• beforeRouteUpdate是一个公用一个路由组件改变参数时触发, 例如/foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候

怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id获取动态参数

4.怎么使用vue-router

第一步安装
npm install vue-router -S

第二步在main.js中使用Vue Router组件

第三步配置路由
定义 (路由) 组件
路由组件可以是直接定义，也可以是导入已经定义好的组件。这里导入已经定义好的组件。如下

定义路由（路由对象数组）
定义路由对象数组。对象的path是自定义的路径（即使用这个路径可以找到对应的组件），component是指该路由对应的组件。如下：

实例化Vue Router对象
调用Vue Router的构造方法创建一个Vue Router的实例对象，将上一步定义的路由对象数组作为参数对象的值传入。如下

挂载根实例

第四步在App.vue中使用路由
在App.vue中使用标签来显示路由对应的组件，使用标签指定当点击时显示的对应的组件，to属性就是指定组件对应的路由。如下：

5.路由按需加载(懒加载）

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

1.vue异步组件
2.es提案的import()
3.webpack的require,ensure()

1 . vue异步组件技术 ==== 异步加载
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件
{ path: ‘/home’, name: ‘home’, component: resolve => require([’@/components/home’],resolve) },
2.组件懒加载方案二 路由懒加载(使用import)
const 组件名=() => import(‘组件路径’);
3.webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
{ path: ‘/home’, name: ‘home’, component: r => require.ensure([], () => r(require(’@/components/home’)), ‘demo’) },