vue.js - [Vue警告] : Failed to resolve component: router-view

Question

我是 Vue.js 的新手，第一次接触 vue-router。 刚刚创建了一些文件，由于某种原因我看不到模板。编译成功，但在浏览器中出现以下错误:无法解析组件:router-view

main.js

import { createApp } from 'vue';
import VueRouter from 'vue-router';
import { store } from './store';
import App from './App.vue';
import AuthHandler from './components/AuthHandler';

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/oauth2/callback', component: AuthHandler }
    ]
});

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

App.vue

<template>
  <div>
    <AppHeader></AppHeader>
    <router-view></router-view>
  </div>
</template>

<script>
import AppHeader from "./components/AppHeader";
export default {
  name: "App",
  components: {
    AppHeader
  }
};
</script>

组件/AuthHandler.vue

<template>
  <div>
    ... Please wait
  </div>
</template>

<script>
export default {
  name: "AuthHandler"
};
</script>

这是package.json

package.json

{
  "name": "images",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "lodash": "^4.17.21",
    "qs": "^6.10.1",
    "vue": "^3.0.0",
    "vue-router": "^3.5.2",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Answer 1

我通过以下方式解决了这个问题。我相信问题是在 vue/vue-router 版本上发生的。我希望这是正确的方法:-)

main.js

import { createApp } from 'vue';
import App from './App.vue';
// import VueRouter from './vue-router';
import { createWebHistory, createRouter } from "vue-router";
import { store } from './store';
import AuthHandler from './components/AuthHandler';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/about', component: AuthHandler }
    ]
});

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