如何解决虚拟路由器未登录的TypeError？

Question

我试图将我的项目从vue 2升级到vue 3，但是我经常会出错。这是我的新控制台错误：

vue-router.mjs:3499未定义的TypeError:无法读取未定义的属性(读取“位置”)

这是3499号线：

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

该文件在(front/node_modules/vue-router/dist/vue-router.mjs)中，如何修复？

我使用的是：“vue-路由器”："^4.1.2"，

main.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,
});