vue.js router help what error could mean in console router-link router-view vue.js - vue.js

Question

Hi im working on the blog-app to practice vue.js. I have now made it so my nav-bar is showing but I have a problem with the routing.
Here is the errors in the console and the directories and files.
here is my main.js;
import { createApp } from 'vue'
import App from './App.vue'
import router from './routers'
import navBar from './components/navbar/navBar.vue';
const app = createApp(App)
app.component('app-navbar', navBar)
app.mount('#app')
app.use(router)
here is my app.vue
<template>
<div class="container">
<app-navbar></app-navbar>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
}
</script>
here is my routers.js;
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
name: 'homePosts',
component: () => import ('./views/homePosts'),
path: '/homePosts'
},
{
name: 'writePost',
component: () => import('./views/writePost'),
path: '/writePost'
}
];
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
here is my writePost.vue;
<template>
<div>
<form class="form">
<label for="">Writer name: </label>
<input type="text" max="500">
<br>
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*">
<br>
<label for="">Your blogtext: </label>
<textarea name="" id="" cols="30" rows="30"></textarea>
</form>
</div>
</template>
<script>
Here is my directories;
here is navbar.vue
<template>
<div class="container">
<div>
<img class="img" src="#/assets/bloglogo.jpg">
</div>
<div class="nav-div">
<navbar class="nav">
<ul class="navbar">
<div class="li"><router-link to="/views/homePosts">Home</router-link></div>
<div class="li"><router-link to="/views/writePost">Write a post</router-link></div>
</ul>
</navbar>
</div>
</div>
</template>

Answer 1

Firstly, you forgot to download the vue-router package or I don't know. Because as soon as I run the project, I got the error "Vue-router module not found".
To install the vue-router package:
pnpm install vue-router#latest
or
npm install vue-router#latest
Then I examined your router.js file. You should only import and use .vue files as components.
router.js
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{
name: "Home",
path: "/",
redirect: { name: "homePosts" },
},
{
name: "homePosts",
component: () => import("./views/homePosts.vue"),
path: "/home-posts",
},
{
name: "writePost",
component: () => import("./views/writePost.vue"),
path: "/write-post",
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
When I came to the / path, I directed it to the /home-posts path. However, if you want, you can create a new component and assign it to / path.
Also, I suggest you give your path names as kebab-case. Like /home-posts
And finally I edited your main.js file a bit.
main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./routers";
import navBar from "./components/navbar/NavBar.vue";
const app = createApp(App);
app.use(router);
app.component("app-navbar", navBar);
app.mount("#app");
When you follow these steps, your problem should be completely resolved.
Also, as I said in the comment, there is only 1 warning message left, unfortunately I do not know the solution for it.