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

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

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

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

Nuxt.js

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

ルーティング

ルーティングとは、TCP/IPネットワークにおいて、目的のホストまでパケットを送る為のパス選定のプロセスを言います。

解決済

Nuxtアプリでパラメータを利用したアクセスをするとエラーになる

genki0126
genki0126

総合スコア33

Vue.js

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

Nuxt.js

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

ルーティング

ルーティングとは、TCP/IPネットワークにおいて、目的のホストまでパケットを送る為のパス選定のプロセスを言います。

1回答

0評価

0クリップ

180閲覧

投稿2022/04/29 00:17

Nuxtについて学習中です。

パラメータを利用してNuxtアプリにアクセスしようとすると
「This page could not be found」の画面になってしまいます。
原因や解決方法などご教示していただけると助かります。

ターミナルやブラウザ画面にはエラーログなどは表示されていないので、解析が難しい状況です。

アクセスできないファイル

URL「http://localhost:9000/p/hanako/flower」
ファイル「pages/p/_id/_pass.vue」

_pass.vue

<template> <section class="container"> <h1>{{title}}</h1> <p v-html="message">no message</p> <hr> <div class="right"> <router-link to="/">Go to Top</router-link> </div> </section> </template> <script> export default { data: function() { return { title: "login", }; }, computed: { message: function() { let id = this.$route.params.id != undefined ? this.$route.params.id : "*** no id ***"; let pass = this.$route.params.pass != undefined ? this.$route.params.pass : "*** no password ***"; return "ID:" + id + "<br>PASS:" + pass; }, }, } </script> <style> </style>

アクセスできるファイル

URL「http://localhost:9000」
ファイル「pages/index.vue」

index.vue

<!-- Please remove this file from your project --> <template> <section class="container"> <h1>{{title}}</h1> <p>{{message}}</p> <hr> <router-link to="/other">go to other</router-link> </section> </template> <script> export default { name: 'NuxtTutorial', data: function() { return { title: "Hello", message: "this is message.....", now: "wait...", }; }, created: function() { setInterval(() => { var d = new Date(); this.now = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); }, 1000); }, }; </script>

その他設定ファイル

「.nuxt/router.js」に今回のファイルへのルーティングが設定されていない?
前に作成したindex.vue、other.vueは設定されている

router.js

const _c51c026c = () => interopDefault(import('../pages/other.vue' /* webpackChunkName: "pages/other" */)) const _3d6810e8 = () => interopDefault(import('../pages/index.vue' /* webpackChunkName: "pages/index" */)) const emptyFn = () => {} Vue.use(Router) export const routerOptions = { mode: 'history', base: '/', linkActiveClass: 'nuxt-link-active', linkExactActiveClass: 'nuxt-link-exact-active', scrollBehavior, routes: [{ path: "/other", component: _c51c026c, name: "other" }, { path: "/", component: _3d6810e8, name: "index" }], fallback: false }

「.nuxt/routes.json」も同様

routes.json

[ { "name": "other", "path": "/other", "component": "/workspace/pages/other.vue", "chunkName": "pages/other", "_name": "_c51c026c" }, { "name": "index", "path": "/", "component": "/workspace/pages/index.vue", "chunkName": "pages/index", "_name": "_3d6810e8" } ]

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Nuxt.js

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

ルーティング

ルーティングとは、TCP/IPネットワークにおいて、目的のホストまでパケットを送る為のパス選定のプロセスを言います。