Vue.jsでVue Routerの表示の制御の上手い方法が思いつかない話

f:id:ts0818:20220116181324j:plain

nazology.net

現在、アメリカ・シアトル近郊の刑務所には数学の天才が収監されています。

殺人犯であるクリストファー・ヘヴンズ氏が刑務所で数学を学ぶようになった結果、ある難問を解くまでになったのです。

数学の超難問を収監中の殺人犯が解いてしまった話 - ナゾロジー

⇧う、う~ん...複雑な心境ですな、自分に何が向いてるのかってやってみないと分からないってことが証明されたようで、人生の残酷さを痛感する今日この頃、どうもボクです。

というわけで、今回もVue.jsについてです。

レッツトライ~。

Vue.jsでVue Routerの表示の制御の上手い方法が思いつかない話

Vue.jsのVue Routerで、「global navigation」と「sidebar」のリンクが混在してる時とかに、それぞれでループ処理とかで表示したいと思って、そもそもループ処理で表示してる情報がほとんど見当たらず衝撃で震えているのだけど、

stackoverflow.com

⇧ 上記サイト様で、ループ処理で表示してる人がいたので、ループ処理での表示が不可能というわけではないらしい。

ということで、やってみました。

利用している「Vue.js」のプロジェクトは、

ts0818.hatenablog.com

⇧ 上記の記事と同じものになります。

で、ファイルなどを追加。

f:id:ts0818:20220116172550p:plain

⇧ 変更したところとしては、「sidebar」フォルダの下に「setting」ってフォルダを作成して、ファイルを追加したのと、「sidebar-router.ts」に追記した感じですかね。

他については、前回の記事までの内容と変えてないので、変更したファイル以外は割愛。

■my-app\src\views\sidebar\setting\Setting.vue

<template>
<div>
  <router-view/>
</div>
</template>    

■my-app\src\views\sidebar\setting\Email.vue

<template>
<div>
  <h1>Email設定</h1>
</div>
</template>    

■my-app\src\views\sidebar\setting\Profile.vue

<template>
<div>
  <h1>Profile設定</h1>
</div>
</template>      

■my-app\src\router\sidebar-router.ts

export default {
  // sidebar
  path: "/setting",
  name: "Setting",
  component: () =>
    import(
      /* webpackChunkName: "setting" */ "../views/sidebar/setting/Setting.vue"
    ),
  children: [
    {
      path: "email",
      name: "Email",
      component: () =>
        import(
          /* webpackChunkName: "email" */ "../views/sidebar/setting/Email.vue"
        ),
    },
    {
      path: "profile",
      name: "Profile",
      component: () =>
        import(
          /* webpackChunkName: "profile" */ "../views/sidebar/setting/Profile.vue"
        ),
    },
  ],
};    

■my-app\src\views\common\Sidebar.vue

<template>
  <div class="sidebar">
    <h1>Sideber</h1>
    <!--<ul v-for="route in $router" :key="route.fullpath">-->
    <!--<li><router-link :to="`${route.path}`"></router-link></li>-->
    <ul>
      <li><router-link to="" tag="span">設定</router-link>
        <ul>
          <li><router-link :to="{name: 'Email'}">Email設定</router-link></li>
          <li><router-link :to="{name: 'Profile'}">Profile設定</router-link></li>
        </ul>
      </li>
    </ul>
    <!-- for文だと細かい制御が厳しい... -->
    <ul>
      <li v-for="route in $router.options.routes" :key="route.path">
        <router-link :to="route.path">{{route.name}}</router-link>
        <ul v-if="route.children">
          <li v-for="child in route.children" :key="child.path">
          <router-link :to="route.path+'/'+child.path">{{child.name}}</router-link>
          </li>
        </ul>
      </li>
    </ul>
    <!--<router-view/>-->
  </div>
</template>

⇧ で、コマンドプロンプトなんかで、「npm run serve」を実行して

f:id:ts0818:20220116174145p:plain

f:id:ts0818:20220116174207p:plain

ブラウザでアクセス。

f:id:ts0818:20220116174616p:plain

⇧ for文でループさせた場合、入れ子の親の<a>タグを無効にしたりの制御の上手い方法が思いつかないというね...

そもそもとして、「Sidebar」に「global navigation」の「Home」「About」「Contact」とかを表示したくなかったんだけど、for文でループさせる場合に、「my-app\src\router\index.ts」の内容で部分的に表示する方法も思いつかんかったのよね...

まぁ、リンクが1000個ぐらいあるようなケースを想定すると、ループ処理で表示せざるを得ないとは思うんだけど、如何せん情報が見当たらないというね...

Vue.jsってGitHubで一番利用されてるらしいJavaScriptフレームワークという情報があったんだけど、その割には、Google検索で情報が上位表示されてこないってのが解せぬ...

フロントエンドの有識者に情報発信を頑張っていただきたいところですかね。

毎度モヤモヤ感が半端ない...

今回はこのへんで。