Vue Router是Vue.js 的官方路由，方便构建单页面应用。主要有以下几个概念

router-link和router-view

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

 router-link 来创建链接，做点击跳转。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

router-view 用来容纳路由视图，显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

嵌套路由

正常是只有 path 和 component 两个属性，嵌套路由就是加一个children 属性，对应的是数组，以此来设置子路由

  export const routes: RouteRecordRaw[] = [
    { path: '/', component: Foo },
    { path: '/about', component: Bar },
    { path: '/welcome', component: Welcome,
      children: [
        { path: '1', component: First, },
        { path: '2', component: Second, },
      ]
    }
  ]

注意，以 / 开头的嵌套路径将被视为根路径。

Hash 模式和 History 模式

两种模式的区别：

一个用的是Hash，一个用的是History API。Hash 模式不需要后端配合，404页面由前端自己配置。History 模式需要后端Nginx 的配合，把所有的html 请求都重定向到index

导航守卫

每个路由都可以设置一个钩子，来设置进入路由、离开路由之时做什么

导航守卫如何实现登录控制？

router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next()
  if (to是受控页面 && 没有登录) return next('/login')
  next()
})

懒加载

懒加载即import()

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。为了高效就可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。

Vue Router 可以用动态导入代替静态导入：

// 将
// import UserDetails from './views/UserDetails.vue'
// 替换成
const UserDetails = () => import('./views/UserDetails.vue')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

component (和 components) 配置接收一个返回 Promise 组件的函数，Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。这意味着你也可以使用更复杂的函数，只要它们返回一个 Promise ：

const UserDetails = () =>
  Promise.resolve({
    /* 组件定义 */
  })

一般来说，对所有的路由都使用动态导入是个好主意。