跳至主要內容

路由元信息

刘春龙原创...小于 1 分钟WEB前端Vue3路由教程文档

有时,你可能希望将任意信息附加到路由上,如过渡名称、谁可以访问路由等,这些事情可以通过接收属性对象的meta属性来实现

定义路由的时候你可以配置 meta 字段,这个meta就是路由元信息

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {
        requiresAuth: true
      },
      component: () => import('../views/home/home.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/about/about.vue'),
      meta: {
        requiresAuth: false
      },
    }
  ]
})

router.beforeEach((to, from, next) => {
  let token = true;
  if (to.meta.requiresAuth) {
    if (!token) {
      console.log("身份认证失败")
      next({
        path: "/login"
      })
    } else {
      next()
    }
  } else {
    console.log("权限不足")
    return
  }
})

export default router


























 















上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7