![\"Vue](\"/assets/vue-logo.png\" "\\"Vue"){kind=logo}
네트워크에서 사용되는 용어로, 어떤 네트워크 안에서 통신 데이터를 보낼 최적 의 경로를 선택하는 과정을 뜻함
\n웹에서의 라우팅은 웹 페이지 간의 이동 방법을 뜻 한다. 예를 들면 아래와 같다.
\n예)
\nVue Router 는 프로젝트 생성시 기본 dependencies 로 추가 할수도 있고, npm or yarn 을 사용하여 필요에 따라 추가 할수 있다. 프로젝트 생성 이후 Vue Router 를 추가 하는 방법은 아래와 같다.
\n터미널을 실행 한후 프로젝트 root 로 이동 해서 npm 으로 라이브러리를 추가 한다.
\nnpm install vue-router --save // dependencies\nnpm install vue-router --save-dev // devDependencies![\"Vue](\"/assets/vue-js-npm-install-vue-router.png\" "\\"Vue")
![\"Vue](\"/assets/vue-js-npm-install-vue-router2.png\" "\\"Vue")
npm 은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. yarn 또한 npm과 같이 js 패키지 매니저이다.
\n// {패키지 관리자명} install {플러그인명} --save\nnpm install vue-router\nnpm install vue-router --save-dev—save, —save-dev 는 플러그인이 dependencies 항목에 저장 되는지 아니면 devDependencies 에 저장 되는지를 선택 하는것이다. devDependencies 는 개발모드에서만 활용 되는 플러그인을 저장 한다.\n—save 는 기본값 이기 때문에 생략 가능하다.
\n// {패키지 관리자명} add {플러그인명}\nyarn add vue-router\nyarn add --dev vue-router—dev 는 devDependencies 에 저장 한다.
\nimport Vue from \"vue\"\nimport VueRouter from \"vue-router\"\nimport Home from \"../views/Home.vue\"\n\nVue.use(VueRouter)\n\nconst routes = [\n {\n path: \"/\",\n name: \"Home\",\n component: Home,\n },\n {\n path: \"/about\",\n name: \"About\",\n component: () => import(\"../views/About.vue\"),\n },\n]\n\nconst router = new VueRouter({\n mode: \"history\",\n base: process.env.BASE_URL,\n routes,\n})\n\nexport default router라우트를 초기화 한다.
\nconst routes = [\n ... code\n {\n path: \"{URL 경로}\",\n name: \"{라우트명}\",\n component: () => import(\"{컴포넌트 경로}\"),\n },\n ... code\n];<router-link to=\"URL\">페이지 이동 태그, 화면에서는 로 렌더링되며, 클릭하면 to에 지정한 URL로 이동 된다.
\n<router-view>페이지 표시 태그, 변경되는 URL에 따라 해당 컴포넌트를 화면에 그려지는 영역 이다.
\nsrc\n├── components // 컴포넌트\n├── router // 라우팅\n│── views // 화면\n│ ├── About.vue // About 컴포넌트\n│ └── Home.vue // Home 컴포넌트\n│── main.js // 메인 (뷰인스턴스 초기화)\n└── App.vue // App 컴포넌트App.vue
\n<router-view>main.js
\nimport routerrouter/index.js
\nconst routes = [\n ... code\n {\n path: \"{URL 경로}\",\n name: \"{라우트명}\",\n component: () => import(\"{컴포넌트 경로}\"),\n },\n ... code\n];views/home
\n<template>\n <div class=\"home\"></div>\n</template>\n\n<script>\n export default {\n name: \"Home\",\n components: {},\n }\n</script>views/about
\n<template>\n <div class=\"about\"></div>\n</template>\n\n<script>\n export default {\n name: \"About\",\n components: {},\n }\n</script>![\"Vue](\"/assets/vue-js-vue-router-index.png\" "\\"Vue")