blackteay/Vue3-Vite-Vant-TS-H5
1
0
Fork 0
mirror of https://github.com/talktao/Vue3-Vite-Vant-TS-H5.git synced 2025-04-30 22:52:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix：实现动态路由

Browse Source
This commit is contained in:
talktao 2022-03-21 13:12:10 +08:00
parent 12bfca42ee
commit f4d32f1a59
1 changed files with 91 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/router/index.ts
View File

@ -1,54 +1,98 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"; import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [ const mainRouterModules = import.meta.glob('../layout/*.vue')
{ console.log(mainRouterModules,'mainRouterModules');
path: '/',
name: 'Index', const viewRouterModules = import.meta.glob('../views/**/*.vue')
component: () => import ('@/layout/index.vue'), console.log(viewRouterModules,'viewRouterModules');
redirect: '/home',
meta: {
title: '首页', // 子路由
keepAlive:false const childRoutes = Object.keys(viewRouterModules).map((path)=>{
}, const childName = path.match(/\.\.\/views\/(.*)\.vue$/)[1].split('/')[1];
children: [ return {
{ path: `/${childName.toLowerCase()}`,
path: '/home', name: childName,
name: 'Home', component: viewRouterModules[path]
component: () => import('@/views/home/Home.vue')
},
{
path: '/category',
name: 'Category',
component: () => import('@/views/category/Category.vue')
},
{
path: '/welfare',
name: 'Welfare',
component: () => import('@/views/welfare/Welfare.vue')
},
{
path: '/orders',
name: 'Orders',
component: () => import('@/views/orders/Orders.vue')
},
{
path: '/about',
name: 'About',
component: () => import('@/views/about/About.vue')
},
{
path: '/orders',
name: 'Orders',
component: () => import('@/views/order/Orders.vue')
},
{
path: '/detail/:id',
name: 'Detail',
component: () => import('@/views/home/Detail.vue')
} }
] })
},
] console.log(childRoutes,'childRouter');
// 根路由
const rootRoutes = Object.keys(mainRouterModules).map((path) => {
const name = path.match(/\.\.\/layout\/(.*)\.vue$/)[1].toLowerCase();
console.log(name,'name');
const routePath = `/${name}`;
console.log(routePath,'routePath');
if (routePath === '/index') {
return {
path: '/',
name,
redirect: '/home',
component: mainRouterModules[path],
children: childRoutes
};
}
})
const routes: Array<RouteRecordRaw> = rootRoutes
// const routes: Array<RouteRecordRaw> = [
// {
// path: '/',
// name: 'Index',
// component: () => import ('@/layout/index.vue'),
// redirect: '/home',
// meta: {
// title: '首页',
// keepAlive:false
// },
// children: [
// {
// path: '/home',
// name: 'Home',
// component: () => import('@/views/home/Home.vue')
// },
// {
// path: '/category',
// name: 'Category',
// component: () => import('@/views/category/Category.vue')
// },
// {
// path: '/welfare',
// name: 'Welfare',
// component: () => import('@/views/welfare/Welfare.vue')
// },
// {
// path: '/orders',
// name: 'Orders',
// component: () => import('@/views/orders/Orders.vue')
// },
// {
// path: '/about',
// name: 'About',
// component: () => import('@/views/about/About.vue')
// },
// {
// path: '/orders',
// name: 'Orders',
// component: () => import('@/views/order/Orders.vue')
// },
// {
// path: '/detail/:id',
// name: 'Detail',
// component: () => import('@/views/home/Detail.vue')
// }
// ]
// },
// ]
console.log(routes,'routes');
const router = createRouter({ const router = createRouter({
history: createWebHashHistory(), history: createWebHashHistory(),