Vue v3 app does not render components with vue-router#4 - vue.js

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>

Answer 1

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>