JS 许冬博客

← 返回文章列表

Vue2019/06/15·1880 次阅读

Vue Router 实战：嵌套路由、守卫与懒加载

#Vue 2 #Vue Router

Vue Router 实战：嵌套路由、守卫与懒加载

单页应用只有一个 HTML，"页面跳转"其实是 JS 切换组件，Vue Router 负责这套机制。

两种模式

hash 模式：URL 带 #，如 /#/posts。# 后面的变化不会请求服务器，兼容性好，不用服务端配置
history 模式：干净的 /posts，靠 history.pushState。但服务器必须配置回退到 index.html，否则刷新 404

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/posts/:id', component: PostDetail, props: true },
  ],
})

嵌套与动态路由

后台页面有公共的侧边栏布局，子页面在内部切换：

{
  path: '/admin',
  component: AdminLayout,
  children: [
    { path: 'posts', component: PostList },
    { path: 'posts/:id/edit', component: PostEdit },
  ],
}

父组件里放 <router-view> 作为子路由出口。开 props: true，路由参数作为 props 传入组件，组件不再耦合 $route。

导航守卫

router.beforeEach((to, from, next) => {
  if (to.path.startsWith('/admin') && !isLoggedIn()) {
    next('/login') // 拦截未登录访问后台
  } else {
    next() // 放行
  }
})

还有组件内守卫 beforeRouteEnter（此时拿不到 this，用 next(vm =>)）、beforeRouteLeave（表单未保存时拦截离开）。

懒加载

component: () => import('./pages/admin.vue') // 打成独立 chunk，访问时才下载

首屏只加载必要代码，配合 webpackChunkName 还能把相关页面合并成一个 chunk。

看到这里了？如果这篇文章帮到过你

请我喝瓶可乐就好 🥤

收款码

评论0 条

还没有评论，来抢沙发～