vue路由

1、两种模式 hash、history

（1）两种模式最大的区别就是链接里有没带#，hash模式会带上#
（2）在生产环境中，history 模式有一个比较大的问题，就是当手动刷新时，会报404错误

• hash 模式下下，只将 hash 前面的部分当作地址，所以会向服务端重新请求，刷新之后，与刷新之前的页面内容是一致的（因为 hash 值没有变化）
• istory 模式下，会将地址栏中的地址全部看作请求地址，所以刷新后，会向服务端请求这个地址，而我们的前端项目下，只有一个 index.html 和一些 js、css、图片等文件，根本没有请求的资源，所以服务器就返回 404了
• 解决方法：apche服务器重写路由到 www.xx.com/ 下。然后刷新可正常访问到 手动刷新的 页面

刷新页面路径访问404时会重定向到index.html，配置url重写语句，注意是重写，不是重定向。

2、懒加载

import Login from '../views/Login

这种方式导入组件，当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。打包后，这些组件都会被打包到一个以app开头的文件中。

const Login = () => import('../views/Login')
...
 {
    path: '/login',
    name: 'login',
    component: Login // 此时的 login 是函数
  },

对比原来的引入方式，就能发现不同点：现在的 Login 是个函数，当路由规则匹配上，就会执行这个函数，才去加载此组件。将所有组件的引入方式都像上面这样修改后，重新打包，由原来的一个js文件拆分成了体积较小的多个js文件。

...
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

这种引入方式是将每个组件都分别打包了，可以将多个组件打包到一个包中。打包后，这些组件都会被打包到一个以about开头的文件中。