若依无登录首页和后端功能保持不变设置

假设我们现在有这样的需求：

1. 首页设置为自己想要的页面，输入网址或域名直接跳转到首页，且首页无需登录即可访问。
2. 若依后台需在网址里手动加入/login路由才可跳转到后台登录。
3. 后台登录后跳转到原后台index页面。

其实就是一个网站建设的需求，若依后台只当作管理来使用，平时普通访客也能访问一般页面。但搜了搜，发现竟然很少有人准确写过该怎么设置，遂自己一番研究，最后终于知道该怎么配置。

步骤:

1. 进入路由配置js，即router/index.js,加入自己的首页路由页面，并修改原首页路由，具体如图
   

  {
    path: '/mainCharge',
    component: () => import('@/views/charge/mainCharge'),
    hidden: true
  },
  {
    path: '/index',
    component: Layout,
    hidden: true,
    children: [
      {
        path: 'index',
        component: () => import('@/views/index'),
        name: 'Index',
        meta: { title: '首页', icon: 'dashboard', affix: true }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    redirect: 'mainCharge',
  },

2. 修改原login页面，修改跳转后的逻辑，将其手动指向配置的后台index路由，注意这里要写为/index/index，不然跳转后后台首页是空白
   

3.设置permission.js，将自定义首页的路由加入白名单

4.测试
直接输入网址不加路由，会跳转咱们自定义的无登录首页

加入/login路由，则跳转到登录页面，登录后跳转到后台首页

大功告成！