vue3 路由中meta作用

在Vue路由中meta是用于存储额外的配置信息的对象。

作用：

1、meta对象可以用来存储页面标题

2、权限验证

3、缓存控制设置等信息

4、面包屑导航

5、动画效果

6、国际化支持

存储标题：

export default [
    {
        path:'/',
        name:"Index",
        component: { render: () => h(resolveComponent("router-view")) },
        redirect:'/',
        meta:{title:"主页"},
        requiresAuth: true
    }
]

页面标题：

router.beforeEach((to,from,next)=>{
    console.log('router.beforeEach---')
    console.log('to=',to)
    console.log('from=',from)
    //路由发生变化修改页面title
    //document.title = to.meta.title || 'Default Title';
    if(to.meta.title){
        document.title = to.meta.title;
    }
    next()
})

权限验证：

路由

export default [
    {
        path:'/',
        name:"Index",
        component: { render: () => h(resolveComponent("router-view")) },
        redirect:'/',
        meta:{
        	 title:"主页",
             requiresAuth: true
        }
    }
]

路由守卫

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isUserAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

验证token

// 实际应用中应该替换为真实的权限验证逻辑
function isUserAuthenticated() {
  return Boolean(localStorage.getItem('userToken'));
}

• 通过meta对象中的requiresAuth字段，可以在导航守卫中判断用户是否有权限访问某个页面，官网页面中有些需要登录才能看到的页面+需要宣传无需登录的页面。

缓存控制：

keepAlive

export default [
    {
        path:'/',
        name:"Index",
        component: { render: () => h(resolveComponent("router-view")) },
        redirect:'/',
        meta:{
        	 title:"主页",
             requiresAuth: true,
             keepAlive: true
        }
    }
]

• 可以通过meta对象中的keepAlive字段控制组件是否需要被缓存

面包屑导航：

breadcrumb

export default [
    {
        path:'/',
        name:"Index",
        component: { render: () => h(resolveComponent("router-view")) },
        redirect:'/',
        meta:{
        	 title:"主页",
             requiresAuth: true,
             keepAlive: true,
             breadcrumb: 'Home'
        }
    }
]

动画效果：

export default [
    {
        path:'/',
        name:"Index",
        component: { render: () => h(resolveComponent("router-view")) },
        redirect:'/',
        meta:{
        	 title:"主页",
             requiresAuth: true,
             keepAlive: true,
             breadcrumb: 'Home',
             transition: 'fade'
        }
    }
]

• 通过meta对象中的transition字段可以控制页面切换时的动画效果。

国际化支持：

export default [
    {
        path:'/',
        name:"Index",
        component: { render: () => h(resolveComponent("router-view")) },
        redirect:'/',
        meta:{
        	 title:"主页",
             requiresAuth: true,
             keepAlive: true,
             breadcrumb: 'Home',
             transition: 'fade',
             i18n: 'homePage'
        }
    }
]

router.beforeEach((to, from, next) => {
  const titleKey = to.meta.i18n;
  document.title = i18n.t(titleKey);
  next();
});