import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from "vue-router";
import axios from 'axios'; //引入axios组件
import store from '../store/index'
import Index from "../views/index/index.vue";
import NavMenu from "../components/NavMenu/NavMenu.vue";
import NotFound from "../views/NotFound.vue";
import Login from "../views/login/login.vue";
import User from "../views/user/user.vue";
import Role from "../views/role/role.vue";
import Test from "../views/test/test.vue";
// 静态路由
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/index',
meta: {
menuShow: false,
}
},
{
path: "/login",
name: "Login",
component: Login,
meta: {
menuShow: false,
}
},
{
path: "/404",
name: "NotFound",
component: NotFound,
meta: {
menuShow: false,
}
},
];
let newRoute = [{
path: `/`,
component: () => import(`@/components/NavMenu/NavMenu.vue`),
children: [
{
path: `/index`,
name: "Index",
component: () => import(`@/views/index/index.vue`),resolve),
meta: {
key: "",
menuName: "主页",
}
}
],
meta: {
key: "PxMart.Index",
menuShow: true,
leaf: true,
menuName: "主页",
}
},
{
path: `/`,
component: () => import(`@/components/NavMenu/NavMenu.vue`),
children: [
{
path: `/user`,
name: "User",
component: () => import(`@/views/user/user.vue`),
meta: {
key: "PxMart.User",
menuName: "用户",
}
},
{
path: `/role`,
name: "Role",
component: () => import(`@/views/role/role.vue`),
meta: {
key: "PxMart.Role",
menuName: "角色",
}
},
],
meta: {
key: "",
menuShow: true,
leaf: false,
menuName: "用户角色管理",
}
},
{
path: `/`,
component: () => import(`@/components/NavMenu/NavMenu.vue`),
children: [
{
path: `/test`,
name: "Test",
component: () => import(`@/views/test/test.vue`),
meta: {
key: "PxMart.Test",
menuName: "测试",
}
},
],
meta: {
key: "",
menuShow: true,
leaf: false,
menuName: "测试",
}
},
]
const router = createRouter({
history: createWebHashHistory(),
routes: routes,
});
let token
let oldToken: any
router.beforeEach(async (to, from, next) => {
token = window.localStorage.getItem('token')
if (token) {
// 如果是访问登录界面，如果用户会话信息存在，代表已登录过，跳转到主页
if (to.path === '/login') {
window.localStorage.removeItem('token')
} else {
// 加载动态菜单和路由
if (token != oldToken) {
store.commit("loadRouter", "")
store.commit("menuRouterLoaded", false)
}
await addDynamicMenuAndRoutes()
}
// 否则跳转到正常跳转
next()
} else {
// 如果访问非登录界面，且户会话信息不存在，代表未登录，则跳转到登录界面
if (to.path === '/login') {
// 否则跳转到正常跳转
store.commit("loadRouter", "")
store.commit("menuRouterLoaded", false)
next()
} else {
if (to.meta.requireLogin == false) {
next()
} else {
next({
path: '/login',
query: {
redirect: to.fullPath
} // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
}
}
oldToken = token
})
// 添加动态路由
async function addDynamicMenuAndRoutes() {
if (store.state.menuRouterLoaded) {
return false
}
let route: any = []
let temporaryLoad: any = []
await axios.get('/api/api/Role/GetAllPermissions', {})
.then(res => {
for (let i = 0; i < newRoute.length; i++) {
// 不等于空说明是唯一1级菜单
if (newRoute[i].meta.key != "") {
for (let j = 0; j < res.data.length; j++) {
// 判断是否显示该路由
if (newRoute[i].meta.key == res.data[j].key) {
route.push(newRoute[i])
}
}
} else if (newRoute[i].meta.key == "") {
// 临时存放，防止赋值后相互关联
temporaryLoad = []
temporaryLoad = JSON.parse(JSON.stringify(newRoute[i]))
temporaryLoad.children = []
for (let k = 0; k < newRoute[i].children.length; k++) {
for (let j = 0; j < res.data.length; j++) {
// 判断路由子类的key是否与api要显示的一致，不一致删除
if (res.data[j].key == newRoute[i].children[k].meta.key) {
// 如果一致就加入子路由
temporaryLoad.children.push(newRoute[i].children[k])
}
}
}
// 判断结束子类路由不为空，则该父类加入路由集合
if (temporaryLoad.children.length != 0) {
route.push(temporaryLoad)
}
}
}
// 拼入404错误页面
route.push({
path: '/:pathMatch(.*)*',
name: 'not-found',
component: NotFound,
redirect: '/404',
meta: {
menuShow: false,
}
})
// 循环拼接入当前路由
for (let i = 0; i < route.length; i++) {
router.options.routes.push(route[i])
}
// 让动态拼接入的路由集合生效
for (let i = 0; i < router.options.routes.length; i++) {
router.addRoute(router.options.routes[i])
}
// 保存加载状态，避免每次请求都请求菜单的API
store.commit("menuRouterLoaded", true)
// 保存菜单树，前端从此获取菜单
store.commit("loadRouter", router.options.routes)
}).catch(function (res: any) {
console.log(res)
})
}
export default router;
页面加载完后控制后报错 No match found for location with path
在路由守卫router.beforeEach中用addDynamicMenuAndRoutes（）里的方法挂载路由，动态生成的路由全部都访问不到，动态路由可以正常获取到
初始化页面访问就No match found for location with path，一片白，有哪位知道怎么解决？
[Vue warn]: Component is missing template or render function.
at <NavMenu onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <App>
