Skip to main content

谈谈 VueRouter

总结：「是什么、怎么做、解决了什么问题、优点是、缺点是、怎么解决缺点」

是什么​

Vue Router 是 Vue.js 的官方路由，它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

动态路由匹配​

  • 设置路由

    const User = {
      template: '<div>User</div>'
    }

    const router = new VueRouter({
      routes: [
        // 动态路径参数 以冒号开头
        { path: '/user/:id', component: User }
      ]
    })

  • 捕获所有路由或 404 Not found 路由

    {
      // 会匹配所有路径
      path: '*'
    }
    {
      // 会匹配以 `/user-` 开头的任意路径
      path: '/user-*'
    }

重定向​

重定向通过 routes 配置 redirect[riːdərekt]来完成

//下面例子是从 /a 重定向到 /b
const router = new VueRouter({
  routes: [{ path: '/a', redirect: '/b' }]
})

别名​

别名通过 routes 配置 alias[ˈeɪliəs]来完成 /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样

const router = new VueRouter({
  routes: [{ path: '/a', component: A, alias: '/b' }]
})

路由懒加载​

  • 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
  • 通过把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应组件。
  • 在箭头函数内使用 import()加上对应的路径
    const 组件名 = () => import('组件路径')