vue3.0之动态路由的添加

vue3.0之动态路由的添加

• 使用路由的 router.addRoute 方法 去添加路由

import {
    useRouter } from 'vue-router'
const router = useRouter()
    router.addRoute({
   
      path: item.path,
      name: item.name,
      // component: () => import(`../views/${item.component}`),
      component: () => import(`../${
     item.component}`),
    })

• 注意点：
  • 不知道为什么 会自动添加 views路径

router / index.ts

import {
    createRouter, createWebHistory } from 'vue-router'
import Home from '../views/home/Home.vue'

// 定义路由 元信息的 类型
declare module 'vue-router' {
   
  interface RouteMeta {
   
    title: string
    transition: string
  }
}

const router = createRouter({
   
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
   
      path: '',
      redirect: 'login',
    },
    {
   
      path: '/login',
      name: 'Login',
      component: () => import('@views/login/Login.vue'),
      meta: {
   
        title: '登录',
        transition: 'animate__fadeInLeft',
      },
    },
    {
   
      path: '/reg',
      name: 'Reg',
      component: () => import('@views/reg/Reg.vue'),
      meta: {
   
        title: '注册',
        transition: 'animate__fadeInLeft',
      },
    },
    {
   
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
   
        title: '首页',
        transition: 'animate__fadeInLeft',
      }