vue js - 无法读取未定义的属性“使用”答案

【问题标题】：vue js - Cannot read property 'use' of undefinedvue js - 无法读取未定义的属性“使用”
【发布时间】：2021-08-28 05:22:30
【问题描述】：

我正在使用 vue js 3，但我遇到了这个错误。我尝试使用路由器。

我的 main.js 文件在这里：

import { createApp } from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'  // i added this
import Vue from 'vue';    // and this
Vue.use(VueRouter);       // and this

createApp(App).mount('#app')

我的 package.json 文件在这里：

{
  "name": "router",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^3.5.1"
  },
  "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"
  ]
}

我哪里错了？错误信息是：未捕获的类型错误：无法读取未定义的属性“使用”

如果你帮助我，我会很高兴。

【问题讨论】：

标签： vue.js vue-router vuejs3 vue-router4

【解决方案1】：

首先你要按照我的回答here安装正确版本的vue路由器，那么你应该使用与 vue 3 兼容的 vue-router 4 的正确语法：

import { createApp } from 'vue'
import App from './App.vue'

import {createRouter, createWebHistory} from 'vue-router'  

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,//shsould be imported 
   
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
createApp(App).use(router).mount('#app')

【讨论】：