Using vue-router in a Vuejs 2 application throws '"export 'createRouter' was not-CodePudding

I am trying to set up a vue-router for an application in Vue 2/rails. I installed vue-router through yarn =>

yarn add vue-router@2

That's my router =>

import { createWebHistory, createRouter } from "vue-router"
import PageHome from '../components/PageHome.vue'
import TermsAndConditions from '../components/TermsAndConditions.vue'

const routes = [
  {
    path: "/",
    name: "PageHome",
    component: PageHome,
  },
  {
    path: "/terms-conditions",
    name: "TermsAndConditions",
    component: TermsAndConditions
  }
]

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

export default router

and that's my application file

import Vue from 'vue/dist/vue.esm'
import router from '../router/index'

Vue.use(router)

import PageHome from '../components/PageHome.vue'
import TermsAndConditions from '../components/TermsAndConditions.vue'

const images = require.context('../images', true)
require('../stylesheets/application.scss')

document.addEventListener('DOMContentLoaded', () => {
  if(document.getElementById('v-app')) {

    new Vue({
      el: '#v-app',
      store,
      components: {
        PageHome,
        TermsAndConditions
      }
    })
  }
})

I have added those lines in a file where I want to see the links.

   <router-link to="/">Home</router-link>
   <router-link to="/TermsAndConditions">Terms and conditions</router-link>
   <router-view/>

That's what is in my package.json =>

    "vue": "^2.6.12",
    "vue-loader": "^15.9.6",
    "vue-router": "2",
    "vue-template-compiler": "^2.6.12",
    "vue-turbolinks": "^2.2.2",

Unfortunately I get this error message and I don't really know what to do with it.

Failed to compile.

./app/javascript/router/index.js 13:15-27
"export 'createRouter' was not found in 'vue-router'

Any help is very welcome !!

CodePudding user response：

Can't find documentation for VueRouter2, but in VueRouter3 you have to do it like this:

import VueRouter from 'vue-router';

...

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
})

The code you send as a question is for VueRouter4 that's used with Vue3

CodePudding user response：

For Vue 2 projects you have to call Router.

import Router from 'vue-router';

const router = new Router({
  ...
})

export default router

createRouter is for Vue 3 projects(Vue Router v4).