본문 바로가기
귀펀치토끼는 부서지지 않는다.
주소(D)
영웅은 공부 따원 안 한다네/뷰

[Vue.js] 사이드메뉴

<template>
  <div class="default_layout_container">
    <div class="default_layout_aside_menu" style="background: white;">
      <div class="logo"><img src="../assets/logo.png"></div>
      <div class="company_name" @click="pushPage(account)">
        TM관리 미통화
      </div>
      <div class="company_name" @click="pushPage(example2)">
        관리자 계정관리
      </div>
    </div>
    <div class="default_layout_second_container" style="background: #f4f3f8;">
      <div class="default_layout_body">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { routeHelper, cookieUtils } from '@utils';
import {
  example, account
} from '@router/routePaths';

export default defineComponent({
  setup() {
    const { pushPage } = routeHelper;

    return {
      pushPage,
      example,
      account
    };
  }

});
</script>
 router/index.ts
 
 {
    path: layoutMain,
    name: routeHelper.getRouteName(layoutMain),
    component: LayoutMain,
    children: [
      {
        path: account,
        name: routeHelper.getRouteName(account),
        component: Account,
      },
    ]
  }

이렇게 하고 라우터 설정 해주면

 

완료
내 컴퓨터