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

138
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');
const viewRouterModules = import.meta.glob('../views/**/*.vue')
console.log(viewRouterModules,'viewRouterModules');
// 子路由
const childRoutes = Object.keys(viewRouterModules).map((path)=>{
const childName = path.match(/\.\.\/views\/(.*)\.vue$/)[1].split('/')[1];
return {
path: `/${childName.toLowerCase()}`,
name: childName,
component: viewRouterModules[path]
}
})
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: '/', path: '/',
name: 'Index', name,
component: () => import ('@/layout/index.vue'),
redirect: '/home', redirect: '/home',
meta: { component: mainRouterModules[path],
title: '首页', children: childRoutes
keepAlive:false };
}, }
children: [ })
{
path: '/home',
name: 'Home',
component: () => import('@/views/home/Home.vue') const routes: Array<RouteRecordRaw> = rootRoutes
},
{
path: '/category', // const routes: Array<RouteRecordRaw> = [
name: 'Category', // {
component: () => import('@/views/category/Category.vue') // path: '/',
}, // name: 'Index',
{ // component: () => import ('@/layout/index.vue'),
path: '/welfare', // redirect: '/home',
name: 'Welfare', // meta: {
component: () => import('@/views/welfare/Welfare.vue') // title: '首页',
}, // keepAlive:false
{ // },
path: '/orders', // children: [
name: 'Orders', // {
component: () => import('@/views/orders/Orders.vue') // path: '/home',
}, // name: 'Home',
{ // component: () => import('@/views/home/Home.vue')
path: '/about', // },
name: 'About', // {
component: () => import('@/views/about/About.vue') // path: '/category',
}, // name: 'Category',
{ // component: () => import('@/views/category/Category.vue')
path: '/orders', // },
name: 'Orders', // {
component: () => import('@/views/order/Orders.vue') // path: '/welfare',
}, // name: 'Welfare',
{ // component: () => import('@/views/welfare/Welfare.vue')
path: '/detail/:id', // },
name: 'Detail', // {
component: () => import('@/views/home/Detail.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(),