1

I'm using vue js 3, but im taking this error. I try to use router.

my main.js file is in here:

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')

my package.json file is in here:

{
  "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"
  ]
}

Where am i wrong? The error message is: Uncaught TypeError: Cannot read property 'use' of undefined

If you help me i will be glad.

4

1 回答 1

3

First you've to follow my answer here to install the correct version of vue router, then you should use the correct syntax of vue-router 4 which is compatible with vue 3 :

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')
于 2021-06-11T09:02:02.597 回答