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

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

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

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

解決済

Vue Routerが反映されません

shica
shica

総合スコア20

Vue.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

1回答

0グッド

0クリップ

1980閲覧

投稿2022/06/23 00:37

編集2022/06/23 00:40

質問内容

Vue Routerが反映されず躓いてます。

実現したいこと

・Home.vue反映
・ページタイトル反映

発生している問題・エラーメッセージ

Consoleでは2つの警告が発生しています。

vue(3.2.36)

1[Vue warn]: Failed to resolve component: router-view 2If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 3 at <App> 4 5app.js:7159 [Vue warn]: Property "user" was accessed during render but is not defined on instance. 6 at <Navbar> 7 at <App>

該当のソースコード

main.js

1import "./assets/tailwind.css"; 2import { createApp } from "vue"; 3import App from "./App.vue"; 4import router from "./router"; 5 6const app = createApp(App); 7app.use(router); 8app.mount('#app');

App.vue

1<script setup> 2import Navbar from "./components/Navbar.vue"; 3import Footer from "./components/Footer.vue"; 4</script> 5 6<template> 7 <div class="flex flex-col bg-gray-100 min-h-screen"> 8 <Navbar /> 9 <div class="flex-grow"> 10 <router-view /> 11 </div> 12 <Footer /> 13 </div> 14</template>

index.js

1import * as vueRouter from "vue-router"; 2import Home from "../views/Home.vue"; 3 4const routes = [ 5 { 6 path: "/", 7 component: Home, 8 meta: { 9 title: "Home", 10 }, 11 }, 12]; 13 14const router = vueRouter.createRouter({ 15 history: vueRouter.createWebHistory(), 16 routes, 17}); 18 19router.beforeEach((to, from, next) => { 20 document.title = `${to.meta.title}|MyBlog`; 21 next(); 22}); 23 24export default router;

Home.vue

1<template> 2 <p>Home</p> 3</template>

試したこと

いくつかの記事で下記方法で解決できるとありますが、当該コードはその通りに記述されています。
https://vueshowcase.com/question/failed-to-resolve-component-router-view-vuerouter

main.js

1import { router } from "./router"; // ❌ 2 3import router from "./router"; // 👍

補足情報(FW/ツールのバージョンなど)

  1. 当該コードのNavbar.vueとFooter.vueは問題なく表示されてます

package.json

1 ... 2 "dependencies": { 3 "vue": "^3.2.36", 4 "vue-router": "^4.0.16" 5 }

以下のような質問にはグッドを送りましょう

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

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

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

自己解決

すみません。自己解決できました。
use(router)すべきjsファイルが誤っているという単純ミスでした。。

イメージ説明

投稿2022/06/23 09:37

shica

総合スコア20

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

Vue.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。