vue-roter 4报错: Error: Invalid route component/Uncaught (in promise) Error: Invalid route component解决

代码

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import {store} from './store'
//请求方法的封装
import {postRequest} from "@/utils/api";
import {postKeyValueRequest} from "@/utils/api";
import {putRequest} from "@/utils/api";
import {deleteRequest} from "@/utils/api";
import {getRequest} from "@/utils/api";
import {initMenu} from "@/utils/menus";

router.beforeEach((to, from,next) => {

    if (to.path == '/') {
        next();
    }else {
        initMenu(router, store);
        next();
    }
})

const app = createApp(App)

app.use(ElementPlus)

app.config.globalProperties.postRequest=postRequest
app.config.globalProperties.postKeyValueRequest=postKeyValueRequest
app.config.globalProperties.putRequest=putRequest
app.config.globalProperties.deleteRequest=deleteRequest
app.config.globalProperties.getRequest=getRequest

app.use(router).use(store).mount('#app')

router\index.js:

import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import Test1 from "@/views/Test1";
import Test2 from "@/views/Test2";


const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login,
    hidden: true
  }
  ,{
    path: '/home',
    name: 'Home',
    component: Home,
    hidden: true
  },{
    path: '/home',
    name: '测试菜单',
    component: Home,
    children:[
      {
        path: '/Test1',
        name: '导航一',
        component: Test1
      },{
        path: '/Test2',
        name: '导航二',
        component: Test2
      }
    ]
  }
]
//home里面的children去跳转到时候首先home下面找有没有<router-view/>

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

export default router

附加说明:Login.vue为登录页面,注销用户时跳转到登录页面,跳转代码为:

this.$router.replace("/");

报错信息:
在这里插入图片描述

参考:

带有空 path 的命名子路由不再添加斜线
main.jsrouter\index.js中的path: '/'改为path: ''
问题解决。
2021/11/30 进度
今天把将main.jsrouter\index.js中的path: ''改为path: '/',运行又没有问题了,最新仓库地址:人事系统(前端)

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值