vue-router进阶(路由元信息)

vue-router进阶(路由元信息)

码农世界 2024-05-21 后端 57 次浏览 0个评论

1、路由元信息

1.1 配置元信息

配置路由选项中的meta属性,记录路由携带的信息(比如:每给个路由增加个title, 或者部分路由的访问权限等)。

const routes = [
  {
    path: '/home',
    component: Home,
   	 // 任何人都可以进入
    meta: {
     	requiresAuth: false,
     	title: "首页"
    },
  },
  {
    path: '/user-center',
    component: UserCenter,
    // 只有经过身份验证的用户才能进入
    meta: { 
    	requiresAuth: true,
    	title: "用户中心"
    },
 }
]
1.2 访问元信息

一般是在router.js 或者 main.js中,

router.beforeEach((to, from) => {
	// loginForm 是登录信息,在此获取登录信息,检查是否已登录
  if (to.meta.requiresAuth && !loginForm) {
    // 如果没有,则重定向到登录页面
    return {
      path: '/login',
      // 保存我们所在的位置,以便以后再来
      query: { redirect: to.fullPath },
    }
  }
})

转载请注明来自码农世界,本文标题:《vue-router进阶(路由元信息)》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,57人围观)参与讨论

还没有评论,来说两句吧...

Top