Vue.js　vue3-router-treeを使ってツリービューを実装するサンプル

2024年1月7日

環境
vue 3.0.0
node v14.6.0
yarn 1.22.10
@vue/cli 4.5.9
Windows11 64bit

1.vue-cliを使用してVue3環境を構築します

npm install -g @vue/cli

初期化

npm init

更新

vue upgrade --next

## vueappというプロジェクトを作成
vue create vueapp

プロジェクトに移動する
cd vueapp

2.yarnを使用して、vue3-router-treeをインストールします
yarn add vue3-router-tree

3.src配下のApp.vueを編集します

<template>
  <div class="container">
    <vue3-router-tree :items="routes"> </vue3-router-tree>
  </div>
</template>

<script>
import { defineComponent } from "vue";

import Vue3RouterTree from "vue3-router-tree";
export default defineComponent({
  name: "App",
  components: {
    Vue3RouterTree,
  },
  data() {
    return {
      routes: [
        {
          path: "/",
          name: "Home",
          hasIcon: true,
        },
        {
          path: "/dashboard",
          name: "Dashboard",
          hasIcon: true,
        },
        {
          path: "/component",
          name: "Components",
          hasIcon: true,
          children: [
            {
              path: "/alerts",
              name: "Alerts",
            },
            {
              path: "/avatars",
              name: "Avatars",
            },
            {
              path: "/buttons",
              name: "Buttons",
            },
            {
              path: "/forms",
              name: "Forms",
              children: [
                {
                  path: "/autocompletes",
                  name: "Autocompletes",
                },
                {
                  path: "/checkboxes",
                  name: "Checkboxes",
                },
              ],
            },
          ],
        },
      ],
    };
  },
});
</script>
<style>
.container {
  justify-content: center;
  align-items: center;
}
</style>

4.Vue.jsを起動する
npm run serve
ブラウザから http://プライベートIP:8080 に アクセスする