[Vuejs]-Vue.js router help what error could mean in console router-link router-view vue.js

by

0👍

✅

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.

Leave a comment