2021 10 09

2021-10-09

vuejs 코딩 애플

• bootstrap 사용하기 1. npm install bootstrap 2. main.js에서 import 해주기

  import 'bootstrap'
  import 'bootstrap/dist/css/bootstrap.min.css'
  

• 라우터 - 페이지를 여러개 만들어보자 1. npm install vue-router@4 2. src 폴더 안에 router.js 만들고 작성

  import { createWebHistory, createRouter } from "vue-router";
  
  const routes = [
      {
          path: "/경로",
          component: import 해온 컴포넌트, 
      }
  ]
  
  const router = createRouter({
      history: createWebHistory(),
      routes,
  })
  
  export default router;
  

  3. main.js에 라우터 쓴다고 말해줌

  import router from './router'
  createApp(app).use(router).mount('#app')
  

  4. 라우터를 통해 보여졌으면 하는 공간에 추가해줌

• URL 파라미터 - 비슷한 성격의 페이지를 숫자로 구분하자

  (router.js)
  const routes = [
    {
      path: '/detail/:파라미터명',
      component: Detail,
    },
  ];
  

  - 컴포넌트 안에서 URL 파라미터 추출해서 쓸라면, {{ $route.params.파라미터명 }} - Nested Routes

  const routes = [
    {
      path : '/detail/:id',
      component : Detail,
      children : [
        { path : 'author', component : Author }, // '/details/1/author' 하면 Author 컴포넌트
        { path : 'comment', component : Comment }, // 'details/1/comment' 하면 Commnet 컴포넌트
      ]
    }
  ]
  

  - 페이지 이동 - $router.push('detail/0') 를 통해 @click으로 이동 액션을 클릭 액션으로 줄 수 있음

  <div @click="$router.push("detail/0')">
      움직여라 얍
  </div>
  

• 내비게이션 가드 - 특정 URL로 접속시 코드를 실행시킴 (ex. 로그인 한 놈만 보여줄 수 있게 해줘!)

  const routes = [
    {
      path: "/hello",
      component: HelloWorld,
      beforeEnter: ()=>{
        if (로그인했냐 == false) {
          return '/login'
        }
      }
    }
  ];
  

  - 여러가지 Route에 네비게이션 가드를 추가할라면

  const router = createRouter({ 어쩌구 })
  router.beforeEach((to, from) => {
    //페이지 변경 전에 실행할 코드
  })
  

  - 그냥 컴포넌트 자체에서 메서드 선언해서 사용도 가능. lifecycle hook 쓰는 위치에 쓰자

  beforeRouteEnter(){}
  beforeRouteUpdate(){}