在 Vuejs 2 應用程序中使用 vue-router 會拋出 ''export 'createRouter' was not found in 'vue-router'' 錯誤消息

Question

我正在嘗試為 Vue 2/rails 中的應用程序設置一個 vue-router。 我通過 yarn 安裝了 vue-router =>

yarn add vue-router@2

那是我的路由器=>

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

那是我的申請文件

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

我已將這些行添加到我想查看鏈接的文件中。

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

這就是我的 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",

不幸的是，我收到此錯誤消息，但我真的不知道該如何處理。

Failed to compile.

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

非常歡迎任何幫助！

Answer 1

對於 Vue 2 項目，您必須調用 Router.

import Router from 'vue-router';

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

export default router

createRouter 適用於 Vue 3 項目（Vue Router v4）。

Answer 2

找不到 VueRouter2 的文檔，但在 VueRouter3 中你必須這樣做：

import VueRouter from 'vue-router';

...

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

您作為問題發送的代碼適用於與 Vue3 一起使用的 VueRouter4