質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

0回答

228閲覧

Nuxt.js で、ページリストをvue-routerを活用して自動で作成したい

nieve

総合スコア33

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2019/01/17 07:59

編集2022/01/12 10:55

更新・追加される共有ドキュメントをNuxt.jsで作ろうと思っています。
FAQでよくみかけるサイトのページ構成のように、
サイドメニューにリンク付きで「ページリスト」を設置したいです。

自動で生成されるルーターを利用しようと思ったのですが、
nameが自動生成のため、メニューにいい感じなテキスト表示ができません。

routerに設定されるattributeに例えば[title]などを作って、pageのコンポーネントからデータを渡すみたいなことができれば理想なのですが、
なにか手段はないでしょうか?

Nuxt.jsでブログを運営する場合、新着リストなどの生成は、それ用のjsonを作る、headlessCMSで運用するなど、データを作成しないとできないものなのでしょうか?

↓現在、ルーターから取得した場合のVue Comlponentサンプル

menuComponent.vue

1<template> 2 <ul style="background: #cccccc;"> 3 <li v-for="item in nestedRoutes">{{item.path}} | {{item.name}} | {{item.title}}</li> 4 </ul> 5</template> 6 7<script> 8 export default { 9 data () { 10 return { 11 nestedRoutes: [] 12 } 13 }, 14 created () { 15 this.$router.options.routes.forEach((routeOption) => { 16 if (routeOption.path.startsWith(this.$route.path)) { 17 this.nestedRoutes.push({ 18 name: routeOption.name, 19 path: routeOption.path, 20 /*title: routeOption.title, 例えば、これを使えるようにする*/ 21 }) 22 console.log(routeOption); 23 } 24 }) 25 } 26 } 27</script>

↓自動生成されるrouter.js

router.js

1export function createRouter() { 2 return new Router({ 3 mode: 'history', 4 base: '/', 5 linkActiveClass: 'nuxt-link-active', 6 linkExactActiveClass: 'nuxt-link-exact-active', 7 scrollBehavior, 8 9 routes: [{ 10 path: "/test", 11 component: _3d7d93c9, 12 name: "test" 13 }, { 14 path: "/testFolder/test", 15 component: _6275b869, 16 name: "testFolder-test" 17 }, { 18 path: "/testFolder/test2", 19 component: _274e03ce, 20 name: "testFolder-test2" 21 }, { 22 path: "/", 23 component: _e9eabeaa, 24 name: "index" 25 }], 26 27 fallback: false 28 }) 29} 30

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問