How to setup VueRouter correctly?

Question

I want to create a vue application using VueRouter

My main.js file looks like this:

import VueRouter from "vue"
import MyApp2 from "./MyApp2.vue"
import { createApp } from "vue"
import { createWebHashHistory } from "vue-router"

// 1. Define route components.
// These can be imported from other files
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
  history: createWebHashHistory(),
  routes, // short for `routes: routes`
})

const app = createApp(MyApp2)
app.use(router)

app.mount('#app')

MyApp2.vue looks like this:

<template>
<h1>Hello App!</h1>
  <p>
    <!-- use the router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
  </template>

  <script>
export default {
  name: 'MyApp2'
}

  </script>

And my package.json file looks like this:

{
  "name": "uebungsseite",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.2.3",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-tree-navigation": "^4.0.1",
    "vue-router": "^4.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
    
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

I have run the command

npm install

If I then run

npm run serve

and I go to http://localhost:8080/ , then I see the error

vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
    at eval (webpack-internal:///./src/main.js:33:16)
    at ./src/main.js (http://localhost:8080/js/app.js:39:1)
    at __webpack_require__ (http://localhost:8080/js/app.js:103:33)
    at http://localhost:8080/js/app.js:1224:109
    at __webpack_require__.O (http://localhost:8080/js/app.js:149:23)
    at http://localhost:8080/js/app.js:1225:53
    at http://localhost:8080/js/app.js:1227:12

My line 33 of main.js is empty, so I don't know what this error message tells me Any help appreciated.

Answer 1

In Vue Router 4, you have to initialize it using createRouter function instead of VueRouter constructor:

import { createRouter, createWebHashHistory } from "vue-router"

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})