在 Vue Router 中，并没有一个所谓的默认首页的功能，所以我一直都很好奇，应该如何实现这样的功能？如果没有这样的功能，又如何实现一个项目的默认显示页面呢？

今天，终于有了答案。

这样的功能不是内置的，不过你可以通过 router.beforeEach来实现这个功能。

具体的思路是，在跳转前，对目标路由进行检测，如果目标路由的 meta 信息中写明了需要进行鉴权，就跳转到默认的登陆页面。这样，就可以实现默认显示登陆页面的功能。

具体可以参考的代码

/// 省略引用的代码
let router = new Router({
  mode:"history",
  base:base,
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: { title: '登陆' }
    },
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { title: '首页', requireLogin:true }
    }
  ]
})
router.beforeEach((to, from, next) => {
  const { name,meta } = to;
  const { requireLogin } = meta; // 提取登陆 标志
  if(name === 'login'){
    return next();
  }
  const needLogin = requireLogin;
  if(needLogin){ // 如果判断需要登陆，就跳转登陆。
    return next({
      name:"login",
      params:{
        back: to
      }
    })
  }
  next();
})
Code language: JavaScript (javascript)