前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >(十九)路由 meta 元数据

(十九)路由 meta 元数据

作者头像
老怪兽
发布2023-02-22 18:42:10
发布2023-02-22 18:42:10
30900
代码可运行
举报
运行总次数:0
代码可运行
路由 meta 元数据
  1. 可以使用 meta 来改变 网站的 title
  2. 二可以用来判断用户是否登录,也可以做权限验证
代码语言:javascript
代码运行次数:0
复制
...
import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/blogs",
    component: BlogManagement,
    meta: { private: true }, // 3. 合并,值必须一致,否则重复的属性,会以最后一个属性值为准,子路由的 meta 属性可以省略
    children: [
      {
        path: "new",
        components: {
          default: AddBlog,
          rightSideBar: RightSidebar,
        },
        // 登录后才可以查看次路由
        meta: { private: true },
      },
      {
        path: "details",
        component: BlogDetails,
        // 登录之后才可以查看路由
        meta: { private: true },
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

const loggedIn = false;

router.beforeEach((to, from) => {
  // 1.  打印 to.matched
  console.log(to);

  // 2. 判断匹配的路由是否是私密路由
  // if (to.matched.some((record) => record.meta.private) && !loggedIn) {
  //   return "/login";
  // }
  // 3. meta 合并 判断匹配的路由是否是私密路由
  if (to.meta.private && !loggedIn) {
    return "/login";
  }
});

export default router;
  • 这里我我们需要注意一些这个个参数 matched

说明

这个属性的意思是,访问当前路由,匹配了他多少上级路由,他是一个数组

总结:写在最后

总结

需要注意的是 meta 这个属性对象,会把他下面的所有 meta 进行合并,如果有重名的就会被覆盖(子路由覆盖父路由)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年11月14日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 路由 meta 元数据
  • 总结:写在最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档