layout ファイルに書く nuxt-link のパスが子ページでずれてしまう問題はどうすればよいのだ
今簡単なポートフォリオサイトを Nuxt.js で作ってるんですけど、現状構成はこんな感じになってます。
pages/
--| works/
-----| illustrations
-----| webgl-sandbox
--------| index.vue
--------| foo.vue
--------| bar.vue
-----| webgl-sandbox.vue
pages/works/webgl-sandbox.vue の中身はこんな感じ。
<template>
<nuxt-child />
</template>
<script lang="ts" scoped>
import Vue from "vue";
export default Vue.extend({
layout: "works/webgl-sandbox"
});
</script>
layout/works/webgl-sandbox.vue の中身はこんな感じ。
<template>
<div class="wrapper">
<header>
<div id="home">WebGL sandbox</div>
<nav>
<ul>
<li>
<nuxt-link to>My first WebGL</nuxt-link>
</li>
<li>
<nuxt-link to="foo">foo</nuxt-link>
</li>
<li>
<nuxt-link to="bar">bar</nuxt-link>
</li>
</ul>
</nav>
</header>
<main>
<nuxt />
</main>
</div>
</template>
上記のように nuxt-link が 3 つあるんですが、/works/webgl-sandbox に遷移すると、それぞれ
- works/webgl-sandbox
- works/foo
- works/bar
という感じのパスになってしまいます。なんで index.vue だけ /webgl-sandbox までついてるのに他のパスはそうならないんだ…。
ひとまず絶対パスにしておこうと思うけど、pages の構造に即したパスになんとかできないかな…。