路由是根据不同的路径映射不同的视图

三种模式

• hash
  默认模式，浏览器路径会带 #
• history
  解决 hash 带 #，但服务端要作相应的配置 rewrite

• abstract Vue 非浏览器环境使用

  二个组件

• router-link

使用 to 属性配置要跳转的路径，最终会渲染成 a 标签

• router-view

路由组件渲染的位置

路由配置

是一个对象数组，用来设置在某个路径下应该渲染哪个路由组件

const routes = [
  {path:'/foo', component: Foo},
  {path:'/bar', component: Bar}
]

路由鉴权

beforeForeach 钩子

路由懒加载

// 利用 webpack import 的方法引入异步组件
const lazyComponent = () => import('component.vue');
// 利用 Promise.resolve
const UserDetails = () =>
  Promise.resolve({
    /* component definition */
  })

利用 webpack import 的方法引入异步组件，还能配置 options 使其更明细化一点

const AsyncList = () => ({
    component: import(/* webpackChunkName:'list' */'./List.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
})