使用webstorm开发Vue，写一个带tabbar的登录页面相互切换逻辑

先上效果，如下图
登录页面就是一个登录按钮，项目启动先看下是否登录，如果登录了则直接进入首页，首页是一个tabbar布局的，如果没登录就进登录页，然后点登录按钮进首页。

上面的是首页。由于登录页只有一个按钮就不展示了，下面看具体逻辑和项目文件夹构架。

首先我在src目录中创建了一个views目录然后在这里面创建了5个vue,分别如图所示。然后跟main.js平级创建了一个router.js用来管理项目中的路由。对了这里要用到vue-router库，tabbar我用了mint-ui的UI库，都是用npm来安装的，具体怎么搞这里就不做说明了。我们先来看router.js里面的逻辑。

import Vue from 'vue'
import VueRouter from "vue-router";
import Home from './views/Home'

Vue.use(VueRouter)

export default new VueRouter({
   
    mode:'hash',
    base:process.env.BASE_URL,
    routes:[
        {
   
            path: '/',
            name: 'Tabbar',
            component: ()=>import('./views/Tabbar')
        },
        {
   
            path:'/home',
            name:'Home',
            component:Home
        },
        {
   
            path: '/record',
            name: 'Record',
            component:()=>import('./views/Record')
        },
        {
   
            path: '/mine',
            name: 'Mine',
            component:()=>import('./views/Mine')
        },
        {
   
            path: '/login',
            name: 'login',
            component: ()=>import('./views/Login')
        }
        ]
}