使用vue2.0+vue-router 进行spa开发

Question

我在写一个小demo 没有后台的接口数据， 只能自己使用localstroage模拟的，在注册页面将userName这个字段存进localStroage中， 我想 一打开主页面就先进行判断 localstroage中是否存有userName这个字段，我想得是使用在mian.js中使用beforeEach这个钩子函数， 但是不知道该如何进行下去写，求各位大神帮忙

这是app.vue
<template>

<div id='app2'>
    <el-row>
        <el-col :span="24"><div class='zh-head'>
            <div class='zh-head-l'>
                <span>TRIPICS</span>|<span>运营后台</span>
            </div>
            <div class='zh-head-r' v-if='storage'>
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" >
                    {{loginName}}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <router-link to='/persional'>个人设置</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to='/system'>系统设置</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>退出系统</el-dropdown-item>

                  </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class='zh-head-r' v-else>
                <router-link to='/login' tag='span' active-class='zh-lrActived'>登录</router-link>|
                <router-link to='/resiger' tag='span' active-class='zh-lrActived'>注册</router-link>
            </div>
        </el-col>
    </el-row>

    <el-row >
        <el-col :span='4' class='left-nav'>
            <router-link to='/project' tag='div'  active-class='zh-pmActived'>项目</router-link>
            <router-link to='/money' tag='div'  active-class='zh-pmActived'>财务</router-link>
        </el-col>
        <el-col :span='20' class='dataView'>
            <router-view></router-view>
        </el-col>
    </el-row>
    <script>

export default {

props:{
    type:Array,
    storage:false,
    'loginName':''
},
data(){
    return{

    }
},
methods: {
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
        console.log(key, keyPath);
    }
},
computed:{
    storage:{
        get:function(){

        }
    }
},
beforeRouteEnter(to,from,next){

    console.log(this)
},
beforeRouteLeave (to, from, next){
    console.log(to)
}

}
</script>

下面是main.js
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

import VueRouter from "vue-router";
import VueResource from 'vue-resource'

import App from './app.vue'

import Login from './components/login.vue'
import Resiger from './components/resiger.vue'
import Persional from './components/persional.vue'
import System from './components/system.vue'
import Project from './components/project.vue'
import Money from './components/money.vue'

Vue.config.debug = true;
Vue.use(VueRouter)
Vue.use(VueResource);
Vue.use(Element)

const router = new VueRouter({

routes:[
    {path:'/login',name:'/login',component:Login},
    {path:'/resiger',name:'/resiger',component:Resiger},
    {path:'/system',name:'/system',component:System},
    {path:'/personal',name:'/personal',component:Persional},
    {path:'/project',name:'/project',component:Project},
    {path:'/money',name:'/money',component:Money,},
    {path:'/',name:'/',component:Login}
]

})
router.beforeEach((to,from,next) => {

console.log(localStorage.getItem('username'))
if(localStorage.getItem('username')){
    console.log(123)

}else{
    console.log(456)
    

    next()
}

/*if(localStorage.getItem('username')){
    console.log(localStorage.getItem('username'))
}else{
    next({
        path:'/login'
    })
}*/

})

const app= new Vue({

router:router,
render: h => h(App),
data:{
    storage:'',
    loginName:''
}

}).$mount('#app')