내비게이션 수위 로그인 차단

Before Each 활용
router/index에서.js 아래

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//    
import Home from './../components/home'
import Main from './../components/main'
import Hot from './../components/hot'
import Other from './../components/other'
import Login from './../components/login'
var router = new VueRouter({
    routes:[
        {
            path:'/home',
            component:Home,
            name:Home
        },
        {
            path:'/main',
            component:Main,
            name:Main
        },
        {
            path:'/hot',
            component:Hot,
            name:Hot
        },
        {
            path:'/other',
            component:Other,
            name:Other
        },
        {
            path:'/login',
            component:Login,
            name:Login
        },
        {
            path:'/',
            redirect:'/home'
        }
    ]
})
//           
//to:         （   ）
//from:            （    ）
//next :           resolve       (  )
 router.beforeEach((to, from, next)=>{
  if(to.path !== '/login'){
    if(localStorage.getItem("key")){
        next()
    }else{
        next('/login')
    }
  }else{
      next()
  }
})
export default router

기타 주요 코드는 다음과 같다.
main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

App.vue

import Tab from './components/tab'
export default {
  name: 'app',
  components:{
    Tab
  }
}

components/tab.vue

export default {
    name:'Tab',
    methods:{
        tabPath(path){
            this.$router.push(path)
        }
    }
}

components/home.vue

export default {
    name:'Home'
}

다른 건 다 홈이랑 비슷해서 생략하겠습니다.