Nuxt.jsでnuxt-linkを使ってページ遷移させる
作業中の考えとかも駄々洩れで記録していく。
何をしたか
Nuxt.jsのお勉強。HelloWorldから少し毛をハヤス。
画面遷移させるまでやる。今日はそこまでやるぞ。
まずは振り返る
昨日はHelloWorldも碌にできず、お酒に飲まれていたけど、よくよく思い出すと、HelloWorldはできていた。
手順としては以下
cd C:\root\work\JavaScript\nuxt
//グローバル空間だけど入れちゃう
npm install -g vue-cli
vue init nuxt-community/starter-template sample
//プロジェクトについて入力
Project name helloworld
Project description Nuxt.js project
Author takumi
//終わったら以下実行して正常に起動できるか確認
cd sample
npm install
npm run dev
//以下にアクセスして動作確認
localhost:3000
っで、うまくいかなかったのは
yarn create nuxt-app ×××
ってやつ。
何がいけなかったのだろうかね。
たぶん、UI frameworkで選んだVuetify.js の依存関係がうまく解決できてなかったのかなぁ。
別にこれにこだわってないので、とりあえず違うことやっていこう。
画面遷移を実装だ
helloworldのプロジェクトを眺めた。
よし、このページから違うページに遷移できるようにしよう。
公式でページ遷移について探してると、ルーティングの解説に記述があった。
ふむ。
<nuxt-link to=”/”>
これをどこかにいれるのだね。
何はともあれ、まずはpages/index.vueを見ていくのが良さそう。
<template>
<section class="container">
<div>
<app-logo/>
<h1 class="title">
helloworld
</h1>
<h2 class="subtitle">
</h2>
<div class="links">
<a
href="https://nuxtjs.org/"
target="_blank"
class="button--green">Documentation</a>
<a
href="https://github.com/nuxt/nuxt.js"
target="_blank"
class="button--grey">GitHub</a>
</div>
</div>
</section>
</template>
<app-logo/>はcomponents/AppLogo.vueで定義されているようだ。
DocumentとかGitHubのボタンは、<a>タグで記述されてると。
ん？button–greenのスタイル定義ってどこで記述されているのだ？
layouts/default.vueに記述されていた。
ちょいとググってみると、ちゃんと公式に説明があった。
ただ、今の時点ではあまり関係なさそうだから放置する。
<a>タグの近くに <nuxt-link to=”/”> を配置すればいいんじゃね？
よし、遷移先を作る。
ルーティングの基礎で書いてある。
要は、pagesディレクトリにフォルダ作ってindex.vueとかを作れば
アクセスできるようになる。
pages/input/index.vueを作る。
<template>
<h1>遷移テストやで</h1>
</template>
<script>
export default {
name: ""
}
</script>
<style scoped>
</style>
これで、 http://localhost:3000/inputにアクセスすると
表示できた。
遷移させる
こいつに遷移させるボタンか何か作る。
直感的に
<nuxt-link to=”/input”> 遷移</nuxt-link>
とかやればうまくいきそう。
<template>
<section class="container">
<div>
<app-logo/>
<h1 class="title">
helloworld
</h1>
<h2 class="subtitle">
</h2>
<div class="links">
<a
href="https://nuxtjs.org/"
target="_blank"
class="button--green">Documentation</a>
<a
href="https://github.com/nuxt/nuxt.js"
target="_blank"
class="button--grey">GitHub</a>
<nuxt-link to="/input">遷移</nuxt-link>
</div>
</div>
</section>
</template>
遷移を押すと、ちゃんと遷移できた。
inputと付けたページだから、そこで入力なり何なりやりたいな。
何か変更してみよう。
pages/input/index.vue
<template>
<h1>遷移テストやで</h1>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</template>
はい。エラーでました。
The template root requires exactly one element をヒントに探す。
答えがありました。
これ確か仕事中にも一度遭遇した記憶が。。
<template>タグの中は<div>で囲むというやつ。
<template>
<div>
<h1>遷移テストやで</h1>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
</template>
ちゃんとページが表示されたけど、なんか思ったのと違う。
赤いところに【あああ】が表示される想定なんだが。
次回は赤いところにあああってちゃんと表示できるようにする。