2x1 VueRouter - 进阶 - 路由元信息

VueRouter 基础教程系列 🎉

路由元信息

首先规范下术语，我们将路由配置对象（routes）中的每个配置项称之为 “路由记录”。

路由记录可以通过 children 进行嵌套，所以当一个路由被匹配时，它可能会匹配到多个路由记录，这些路由记录都会作为一个个 $route 对象，保存在 $route.matched 数组中。

通过路由记录的 meta 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据，例如：

• 权限校验标识。
• 路由组件的过渡名称。
• 路由组件持久化缓存 (keep-alive) 的相关配置。

我们可以在导航守卫或者是路由对象中访问路由的元信息数据。

const UsersDetail = {
  //通过路由对象 $route
  template: '<div>{{$route.meta.isRequireAuth}}</div>',

};
const routes = [
  {
    path: '/users/:id',
    component: UsersDetail,
    meta: { isRequireAuth: true }
  }
];

const router = VueRouter.createRouter({
    history:VueRouter.createWebHashHisotry(),
    routes
});

router.beforeEach((to, from)=>{
    //通过路由导航守卫
    if(to.meta.isRequireAuth && !auth.isLoggedIn() && to.path.indexOf('login')===-1){
        return '/login';
    }
})

TypeScript - 模块补充

在 TypeScript 中我们需要使用模块补充来扩展 RouteMeta 接口的类型声明，以更好的帮助 TypeScript 对自定义的 meta 成员进行类型检查。

import 'vue-router';

declare module 'vue-router' {
    interface RouteMeta {
        isRequireAuth?:boolean
    }
}