How to use Vue3 with Router

How to use Vue3 with Router

### How to use Vue3 with Router ### 1.In your "Main.js" ``` import { createApp } from "vue"; import App from "./App.vue"; import store from "./store"; import router from "./route"; const app =...

How to use Vue3 with Router

1.In your "Main.js"

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
import router from "./route";

const app = createApp(App);
app.use(store);
app.use(router);
app.mount("#app");

2. Create router.js file in route directory

import Dashboard from "../components/Dashboard.vue";
import Home from "../views/Home.vue";
const Todo = () => import("../components/TodoApp.vue");
const Counter = () => import("../components/Couter.vue");
const Counter2 = () => import("../views/couter2.vue");
const routes = [
  {
    path: "/",
    name: Dashboard,
    component: Dashboard,
  },
  {
    path: "/home",
    name: Home,
    component: Home,
  },
  {
    path: "/counter",
    component: Counter,
  },
  {
    path: "/todo",
    component: Todo,
  },
  {
    path: "/counter2",
    component: Counter2,
  },
];

export default routes;

3. import routes in index.js in route directory

import { createRouter, createWebHashHistory } from "vue-router";
import routes from "./router";
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

4. My Dashboar Component

<template>
  <div>
    <h1>Dashboard</h1>
    <router-link to="/home">Home</router-link> |
    <router-link to="/counter">Counter</router-link> |
    <router-link to="/counter2">Counter 2</router-link> |
    <router-link to="/todo">Todo App</router-link>
  </div>
</template>
<script>
export default {
  name: "Dashboard",
};
</script>

vue eslint js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue js Axios Tutorial

Vue js Axios Tutorial. We will see Vue axios post request, Vue js headers and Vue js get request. We will use Node.js as backend platform.

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.

Why Vue CLI? - Vue.js

In this article, I'll show you the reasons behind Vue CLI's creation and take you on a journey through its evolution. This will help you not only appreciate it more but also have a deeper understanding of its possibilities. If you're new to the Vue ecosystem and frontend development you may not have an appreciation yet for how much power a tool like Vue CLI provides.