20230220 Vue

새로운 vue를 만들 때,
PS D:\Students\raeeun\work\vue\first> npm install -- save vue-router
원래 파일을 복붙해서 새 파일 만든 후, 새 파일의 이름 변경

export default {
  name: 'App'
  } 
  //에서 
export default {
  name: 'GenreView'
  }

PS D:\Students\raeeun\work\vue\first> vue add router
만약 실행 되지 않는다면, 터미널 창의 우측 상단을 확인해서 cmd로 설정되어 있는지 본다.
cmd상태가 아니라면 F1 -> terminal 검색 -> cmd로 설정 의 단계를 거치면 된다.

vue가 실행할 수 없다고 뜬다면, 재설치 한다.
PS D:\Students\raeeun\work\vue\first> npm install -g vue cli

D:\Students\raeeun\work\vue\first>vue add router
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

📦  Installing @vue/cli-plugin-router...


up to date, audited 982 packages in 1s

103 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✔  Successfully installed plugin: @vue/cli-plugin-router

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

🚀  Invoking generator for @vue/cli-plugin-router...
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: @vue/cli-plugin-router

<template>
  <nav>
    <!-- 말그대로 링크 -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <!-- 해당링크에 들어오면 화면에 보여줄 영역 -->
  <router-view/>
</template>

App.vue의 내용이고

Home.vue의 내용이다.

매핑 경로는 index.js에 있다.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

매핑 경로를 바꾸어 보았다.

import { createRouter, createWebHistory } from 'vue-router'
import GenreView from '../views/GenreView.vue'

const routes = [
  {
    path: '/genre',
    name: 'genreview',
    component: GenreView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

router-link 는 a 태그와 같은 역할

<template>
  <nav>
    <router-link to="/genre" >장르정보</router-link>
  </nav>
  <router-view></router-view>
</template>

router-view에서 GenreView의 내용 표시

서버 실행 시, npm run serve를 터미널에 입력한다.

view 가 화면상에 보이려면, router에 import를 해주어야 한다.
또한, const routes에 경로 및 이름을 추가해 주어야 한다.

import MainView from '@/views/MainView.vue'
const routes = [
  {
    path: '/genre',
    name: 'genreview',
    component: GenreView
  },
  {
    path: '/company',
    name: 'companyview',
    component: CompanyView
  },
  {
    path: '/main',
    name: 'mainview',
    component: MainView
  }
]

아래와 같이 path에 입력한 주소로 연결 시, 페이지가 연결되어야 한다.

children 속성을 부여해서 main 페이지에서 다른 두 페이지로 이동할 수 있도록 한다.
index.js에서 아래처럼 속성 변경

import { createRouter, createWebHistory } from 'vue-router'
import GenreView from '@/views/GenreView.vue'
import CompanyView from '@/views/CompanyView.vue'
import MainView from '@/views/MainView.vue'

const routes = [
  {
    path: '/main',
    name: 'mainview',
    component: MainView,
    children: [
      {
        path: 'genre',
        name: 'genreview',
        component: GenreView
      },
      {
        path: 'company',
        name: 'companyview',
        component: CompanyView
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

또한, 메인 페이지 view에 아래 내용을 추가한다. (이동할 수 있도록, 링크 연결)

<template>
  <div>
    <h1>메인 페이지</h1>
    <nav class="router_area">
      <router-link to="/main/genre">장르정보</router-link>
      <router-link to="/main/company">기획사정보</router-link>
    </nav>
  </div>
  <router-view></router-view>
</template>
<script>
export default {
  name:"MainView"
}
</script>
<style>

</style>