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

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

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

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

Laravel

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

Q&A

解決済

1回答

4155閲覧

Vue Routerが反映されません

shica

総合スコア20

Vue.js

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

Laravel

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

0グッド

0クリップ

投稿2022/06/23 00:37

編集2022/06/23 18:37

質問内容

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 }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

イメージ説明

投稿2022/06/23 09:37

shica

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問