Vue v3 app does not render components with vue-router@4

Question

My Vue v3 app does not render components with vue-router@4 and nothing will show on DOM and http://localhost:8080/view does not show anything from component that correspondent to /view path. please guide me.

I created this project with Vue CLI, and then I intalled npm install vue-router, basically i just added a new component in ./components/users and also modified the main.js file, and that's all.

import AppView from "../AppView";
import AppRegister from "../AppRegister";
import { createRouter, createWebHistory,createMemoryHistory  } from 'vue-router'

const routes = [
    {
        path: '/view',
        name: 'view',
        component: AppView
    },
    {
        path: '/register',
        name: 'register',
        component: AppRegister
    }
]

// let history = isServer ? createMemoryHistory() : createWebHistory()

const router = createRouter({
    history:createWebHistory(),
    routes: routes,
    linkActiveClass: 'active'
  })

export default router;

import {createApp} from 'vue'
import App from './App.vue'
import router from './router/router.js'
import VueRouter from 'vue-router'

createApp(App).use(VueRouter).use(router).mount('#app')

<script>
import AppView from "./AppView.vue";
import AppRegister from "./AppRegister.vue";

export default {
  name: "App",
  components: {
    AppView,
    AppRegister
  },
  data() {
    return {};
  },
  beforeCreate() {
    console.log('beforeCreating...');
    console.log(this.$route.query.mode);
    this.$router.push('/view');
    
    // if(typeof this.$route.query.mode !== 'undefined') {
    //   const redirectPath = this.$route.query.mode || "/";
    //   console.log("redirectPath : " + redirectPath);
    // }
  },
  created() {
    console.log('creating...');
  },

  mounted() {
    console.log('mounting...');
  }
  
};
</script>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "B Titr", sans-serif;
  background-image: url("./assets/Suggestion.png");
  background-repeat: no-repeat;
  direction: rtl;
}

.container {
  max-width: 1000px;
  margin: 30px auto;
  overflow: auto;
  min-height: 300px;
  border: 1px solid steelblue;
  padding: 30px;
  border-radius: 5px;
}

.btn {
  display: inline-block;
  background: #000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  font-family: inherit;
}

.btn:focus {
  outline: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn-block {
  display: block;
  width: 100%;
}
</style>

Please add description on each script, which file is which script. Can you also include the <template></template> on your app.vue? — Kevin Yobeth

tony19 tony19 · Accepted Answer · 2021-05-06T23:23:22

In main.js, you don't need .use(VueRouter) because the plugin initialization is already covered by the imported router instance:

import router from './router/router.js'
import VueRouter from 'vue-router'

createApp(App).use(VueRouter).use(router).mount('#app') ❌
              ^^^^^^^^^^^^^^^

createApp(App).use(router).mount('#app') ✅

And make sure to have a router-view in your root component (e.g., App.vue):

<template>
  <router-view />
</template>

Vue v3 app does not render components with vue-router@4

1 Answers