如何解决 vue-router Uncaught TypeError？

Question

我正在尝试将我的项目从 vue 2 升级到 vue 3。但我经常遇到错误。 这是我的新控制台错误：

vue-router.mjs:3499 Uncaught TypeError: Cannot read properties of undefined (reading 'location')

这是第 3499 行：

push(routerHistory.location).catch(err => {
                    if ((process.env.NODE_ENV !== 'production'))
                        warn('Unexpected error when starting the router:', err);
                });

该文件位于 node_modules (front/node_modules/vue-router/dist/vue-router.mjs) 我该如何修复它？

我正在使用：“vue-router”：“^4.1.2”，

主.js：

import { library } from '@fortawesome/fontawesome-svg-core';
import {faSpinner} from '@fortawesome/free-solid-svg-icons';
import SortedTablePlugin from 'vue-sorted-table/src';
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
import { BootstrapVue3 } from 'bootstrap-vue-3';
import { createApp, h } from 'vue';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';

library.add(
  faSpinner,
);

const app = createApp({
  render: () => h(App),
});

app.use(router);
app.use(BootstrapVue3);
app.use(SortedTablePlugin);
app.component('font-awesome-icon', FontAwesomeIcon);
app.component('font-awesome-layers', FontAwesomeLayers);
app.mount('#app');

路由器/index.js

// import Vue from 'vue';
import { createRouter } from 'vue-router';

import FormStep from '@/components/FormStep.vue';
import DualTable from '@/components/DualTable.vue';
import ListTable from '@/components/ListTable.vue';
import CaptureScreen from '@/components/CaptureScreen.vue';
import StageScreen from '@/components/StageScreen.vue';
import TopScreenConfig from '@/components/TopScreenConfig.vue';
import EmailCapture from '@/components/EmailCapture.vue';
import store from '@/store';

// Vue.use(VueRouter);

const routes = [
  {
    path: '/form/:form/step-:step',
    name: 'FormStep',
    component: FormStep,
  }, {
    path: '/form/:form/step-:step/:related',
    component: FormStep,
  }, {
    path: '',
    name: 'ListTable',
    component: ListTable,
  }, {
    path: '/:status.html',
    component: ListTable,
  }, {
    path: '/personal/',
    component: ListTable,
  }, {
    path: '/personal/:status.html',
    component: ListTable,
  }, {
    path: '/aggregator/',
    component: ListTable,
  }, {
    path: '/aggregator/:status.html',
    component: ListTable,
  }, {
    path: '/config/case_and_process_types.html',
    component: DualTable,
  }, {
    path: '/run_stage/:id/',
    name: 'StageScreen',
    component: StageScreen,
  }, {
    path: '/capture/:id/',
    name: 'CaptureScreen',
    component: CaptureScreen,
  }, {
    path: '/capture_from_email/:email/:id/',
    name: 'EmailCaptureScreen',
    component: EmailCapture,
  }, {
    path: '/config/screens/:id.html',
    name: 'ScreenConfig',
    component: TopScreenConfig,
  }, {
    path: '/config/:model/',
    name: 'ConfigList',
    component: ListTable,
  }, {
    path: '/emails/',
    name: 'Emails',
    component: ListTable,
  },
];

const router = createRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth) && !store.state.user.isAuthenticated) {
    next('/login/');
    return;
  }
  next();
});

export default router;

是关于 Vue.use(VueRouter); 吗？

Answer 1

您需要将mode: 'history'替换为history: createWebHistory()属性，因为mode属性在版本 4 中已弃用。

如需更多资源。

https://router.vuejs.org/guide/migration/index.html#new-history-option-to-replace-mode

这是从 Vue 2 迁移到 Vue 3 的资源

https://router.vuejs.org/guide/migration/index.html

Answer 2

路由器实例应该以这种方式创建：

import { createRouter,createWebHashHistory } from 'vue-router';
....
const router = createRouter({
 history: createWebHashHistory(),
  base: process.env.BASE_URL,
  routes,
});