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 '.
·
代码
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.js
和router\index.js
中的path: '/'
改为path: ''
问题解决。
2021/11/30 进度
今天把将main.js
和router\index.js
中的path: ''
改为path: '/'
,运行又没有问题了,最新仓库地址:人事系统(前端)
更多推荐
已为社区贡献2条内容
所有评论(0)