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

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