Vue3配置好路由之后出现页面无法渲染的问题

在做实验项目时，遇到了代码写好却在页面不渲染的小问题，如图：

在页面检查发现：

上网搜索后问题出在以下两个方面：

一、排除代码拼写错误等小问题

二、app挂载问题

配置好路由之后，我的router.js：

import { createRouter,createWebHistory } from "vue-router";
const routes = [
    {
      path:"/",
      name:"Login",
      component:() => import('./view/LoginviewComponent.vue'),
    },
    {
      path:"/resume/:userName",
      component:() => import('./components/ResumeComponent.vue'),
      props:true
    }
  ]
const router = createRouter({
    history:createWebHistory(),
    routes
})
export default router

代码部分并无问题，查询多个博客发现问题出在main.js中：

main.js修改之前：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './route.js'
import store from './store.js'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
app.use(router)
app.use(store)

npm run serve页面不渲染

main.js修改之后：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './route.js'
import store from './store.js'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')
app.use(store)

页面成功渲染 

修改之处就在于挂载app和使用路由实例的先后顺序：

修改前：

app.mount('#app')
app.use(router)

修改后:

app.use(router)
app.mount('#app')

 逆天小问题