[英]How to solve vue-router Uncaught TypeError?
我正在嘗試將我的項目從 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); 嗎?
您需要將mode: 'history'
替換為history: createWebHistory()
屬性,因為mode
屬性在版本 4 中已棄用。
如需更多資源。
https://router.vuejs.org/guide/migration/index.html#new-history-option-to-replace-mode
這是從 Vue 2 遷移到 Vue 3 的資源
路由器實例應該以這種方式創建:
import { createRouter,createWebHashHistory } from 'vue-router';
....
const router = createRouter({
history: createWebHashHistory(),
base: process.env.BASE_URL,
routes,
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.