연어는 못참아
911
2021-07-29 19:48:48 작성 2021-07-29 20:04:49 수정됨
3
118

vue.js 2차 드롭 메뉴 라우터에 대해서 여쭤봐도 될까요?ㅜㅜ


안녕하세요. vue.js 라우터 할때요. 아래 사진 처럼 개인을 클릭하면 드롭 메뉴로 각각의 메뉴들이 나와서

하위 메뉴를 누르면 해당 페이지로 이동 시키려고 하는데요. 

그래서 views폴더 아래에  private 폴더를 생성하고 그 아래에 각각의 하위  vue파일들을

컴포넌트로 만든뒤에 만약 조회 메뉴라면

라우터 설정할때 path에   ./private/search.vue   

이런식으로 폴더/파일명 이렇게 적어주니 url에서 폴더명만 쏙 빼고 파일명만 넣어져서 해당 파일이 안불러와지네요.ㅠㅠ 


예를 들어 localhost:8080/private/Hello.vue

이렇게 불러오고 싶은데 제가 한 방법으로는 localhost:8080/Hello.vue이렇게 불러와 집니다.

private폴더를 제거하고 views밑에 그냥 vue파일을 넣고 하면 그때는 불러와 집니다.

근데 제가 만들 하위 메뉴들이 여러개 이다 보니 views밑에 폴더를 넣고 해당하는 vue파일들만

모아 놓고 싶은데요. 

혹시 views밑에 폴더를 하나 중간에 넣고 라우팅 시키는 방법이 있을까요?

아무리 검색을 해도 안나오네요. 검색 키워드를 뭐라 해야 할지 모르겠습니다. ㅠㅠ


라우터 설정한 곳이 router폴더 밑의 index.js인데요

거기에

import hello from '../views/private/Hello';


import Vue from 'vue';
import VueRouter from 'vue-router';
import Hello from '../views/private/Hello.vue';

Vue.use(VueRouter);

const router = new VueRouter({  //라우터들의 정보를 관리하는 객체
    routes: [
        {
            //path: url 주소
            //component : url주소로 갔을때 표시될 컴포넌트(페이지)
            //메인페이지
            path: '/private/hello',
            component: Hello,
        },
        {
            //path: url 주소
            //component : url주소로 갔을때 표시될 컴포넌트(페이지)
            path: '/companyinfo',
            component: '',
        }

    ]

});






0
  • 답변 3

  • 프레드윰
    1k
    2021-07-30 13:50:15

    음.. 이건 그냥 간단하게 생각하면 되는데 

    라우터랑 컴포넌트 임포트 하는 방법을 이해 하지 못한거 같은데...


    라우터 구조를 보면 아래 보면 이렇게 쓰셨잖아요 

     path: '/private/hello',
                component: Hello,


    저게 path가 의미하는건 실제 주소를 뜻한거에요 그러니까 브라우저에 보면 세그먼트 (브라우저 주소)를 말한거에요

    사용하려면 /hello 만 쓰셔야되구요

    그리고 components는 지금 프로젝트 구조 보면 views에 해당되는 디렉토리를 말한거에요 

    그렇다면 이렇게 되는거죠 /private/hello.vue


    라우터는 이렇게 페이지에 보이고 싶은것들만 놓고 컴포넌트 내부에 하위 컴포넌트 같은경우는 따로 호출해서 사용하면되여 저 같은 경우는 main.js에 한번에 하위 컴포넌트 임포트해서 쓰거든요 뭐 이건 개인 마다 다른거라서 페이지 컴포넌트 내부에 호출해서 써두 되구요 


     




  • 고로고로
    31
    2021-07-30 13:52:35
    개인 밑에 나오는 드롭메뉴들을 라우터 링크로 만드신건가요?
  • 연어는 못참아
    911
    2021-07-31 04:09:16 작성 2021-07-31 04:38:48 수정됨

    안녕하세요.프레드윰님 고로고로님  답변 달아주셔서 감사합니다.

      해결했습니다. 도움주셔서 정말 감사합니다. ㅠㅡㅠ 



  • 로그인을 하시면 답변을 등록할 수 있습니다.