问Vue路由器应用程序不使用vue- v3 @4呈现组件

EN

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>