Vue Router

// 0. 모듈 시스템 (예: vue-cli)을 이용하고 있다면, Vue와 Vue 라우터를 import 하세요
// 그리고 `Vue.use(VueRouter)`를 호출하세요


// 1. 라우트 컴포넌트를 정의하세요.
// 아래 내용들은 다른 파일로부터 가져올 수 있습니다.
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 라우트를 정의하세요.
// Each route should map to a component. The "component" can
// 각 라우트는 반드시 컴포넌트와 매핑되어야 합니다.
// "component"는 `Vue.extend()`를 통해 만들어진
// 실제 컴포넌트 생성자이거나 컴포넌트 옵션 객체입니다.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. `routes` 옵션과 함께 router 인스턴스를 만드세요.
// 추가 옵션을 여기서 전달해야합니다.
// 지금은 간단하게 유지하겠습니다.
const router = new VueRouter({
  routes // `routes: routes`의 줄임
})

// 4. 루트 인스턴스를 만들고 mount 하세요.
// router와 router 옵션을 전체 앱에 주입합니다.
const app = new Vue({
  router
}).$mount('#app')

// 이제 앱이 시작됩니다!

// Home.vue
export default {
  computed: {
    username () {
      // 곧 `params` 확인할 수 있습니다.
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

{name: 'Query', query: {name: 'cat', age: 3}}

{name: 'Params', params: {name: 'dog', age:4}}

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

export const PUBLIC_PATH = require('@/../vue.config').publicPath;
export const rootChildren = [
    {
        path: PUBLIC_PATH + 'init',
        component: Init,
        name: rootNames.init,
    },
    // ...
];

const http = require('http')
const fs = require('fs')
const httpPort = 80

http
  .createServer((req, res) => {
    fs.readFile('index.html', 'utf-8', (err, content) => {
      if (err) {
        console.log('We cannot open "index.html" file.')
      }

      res.writeHead(200, {
        'Content-Type': 'text/html; charset=utf-8'
      })

      res.end(content)
    })
  })
  .listen(httpPort, () => {
    console.log('Server listening on: http://localhost:%s', httpPort)
  })

this.$router.replace({
   name: "error",
   params: { 0: `/${this.$route.path}` },
   replace: true,
});

export const routes = [
    {
        path: 'init',
        component: Init,
        name: 'init',
    },
    {
        path: 'signin',
        component: Signin,
        name: 'signin',
    },
    {
        path: '*',
        component: Error,
    }
];

if (this.$router.currentRoute.path !== '/main/projects') {
  this.$router.push('/main/projects');
}

    <router-view>
    </router-view>

        children: [
          {
            path: '',
            redirect: 'overview',
          },
          {
            path: 'overview',
            component: OverviewPage,
          },

import Vue from 'vue';
import VueRouter from 'vue-router';
import { UserService } from './../service/user.service';
import store from './../store';

Vue.use(VueRouter);

...(생략)

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => {
        if (err.name !== 'NavigationDuplicated') throw err;
    });
};

export default router;

    moveTo(location: RawLocation) {
        if (this.$router.currentRoute.path === location.toString()) {
            return;
        }

        this.$router.push(location).catch((reason: any) => {
            if (reason.name !== 'NavigationDuplicated') {
                throw reason;
            }
        })
    }

export const Routes = [
    {
        path: '/main',
        component: Main,
        name: 'Main',
        meta: {requiresAuth: true},
        children: [
            {
                path: '',
                redirect: 'dashboard',
            },
            {
                path: 'dashboard',
                component: MainDashboard,
                name: Names.mainDashboard,
            },
        ],
    },
    ...
];

export const Routes = [
    {
        path: '/main',
        component: Main,
        meta: {requiresAuth: true},
        children: [
            {
                path: '',
                name: 'Main',
                redirect: 'dashboard',
            },
            {
                path: 'dashboard',
                component: MainDashboard,
                name: 'MainDashboard',
            },
        ],
    },
    ...
];

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})