ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • vue router
    프론트엔드/Vuejs 2020. 6. 14. 22:20
    import Vue from 'vue'
    import Router from 'vue-router'
    import ExampleRouter from './modules/example'
    
    import Login from '@/components/common/Login'
    
    import store from '@/vuex/store'
    
    const requireAuth = () => (from, to, next) => {
      let auth = store.getters.getIsAuth
      if (auth) {
        return next() // isAuth === true면 페이지 이동
      }
      next('/') // isAuth === false면 다시 로그인 화면으로 이동
    }
    const loginDup = () => (from, to, next) => {
      let auth = store.getters.getIsAuth
      if (auth) {
        return location = '/main'
      }
      next()
    }
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      routes: [{
        path: '/',
        name: 'login',
        beforeEnter: loginDup(), // 로그인 이후 '/' path 접근 redirect
        component: Login
        },
        ExampleRouter 
      ]
    })
    

    ExampleRouter 코드

    /** When your routing table is too long, you can split it into small modules **/
    
    import List from '@/components/List'
    import Create from '@/components/Create'
    import Detail from '@/components/Detail'
    
    import store from '@/vuex/store'
    
    const exampleRouter = {
      path: '/exam',
      component: User,
      redirect: '/exam/list',
      name: 'exam',
      children: [{
        path: 'list',
        component: List,
        name: 'list'
      },
      {
        path: 'create',
        component: Create,
        name: 'create'
      },
      {
        path: 'detail/:no',
        component: Detail,
        name: 'detail'
      }
    
      ]
    }
    
    export default exampleRouter
    
    반응형

    '프론트엔드 > Vuejs' 카테고리의 다른 글

    [Vue] vue eventlistener(이벤트리스너) 추가 제거  (0) 2020.06.14
    [Vue] vue eventbus 사용  (0) 2020.06.14
    vue checkbox 사용  (0) 2020.06.14
    vue 를 스프링부트 에서 연동  (0) 2020.06.14
    vue cli 로 시작하기  (0) 2020.06.14

    댓글

Designed by Tistory.