Q&A
質問内容
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/ツールのバージョンなど)
-
当該コードのNavbar.vueとFooter.vueは問題なく表示されてます
package.json
1 ... 2 "dependencies": { 3 "vue": "^3.2.36", 4 "vue-router": "^4.0.16" 5 }
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。