更新・追加される共有ドキュメントを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
あなたの回答
tips
プレビュー