vue-router#RouteRecordRaw TypeScript Examples

filterRoutes = (menusData: RouteRecordRaw[]): RouteRecordRaw[] => {
  const filterRoutes: string[] = [];
  menusData.forEach((n) => {
    if (n.children) {
      n.children.forEach(({ path }) => filterRoutes.push(path));
    }
  });

  return menusData.filter(({ path }) => !filterRoutes.includes(path));
}

export function setupLayouts(routes: RouteRecordRaw[]) {
  const RouterLayout = createRouterLayout((layout: string) => {
    return import(`../layouts/${layout}.tsx`)
  })

  return [
    {
      path: '/',
      component: RouterLayout,
      children: routes,
    },
  ]
}

routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: 'industry',
        name: 'industry',
        component: IndustryPanels,
      },
      {
        path: 'carbon-neutral-bigscreen',
        name: 'carbon-neutral-bigscreen',
        component: CarbonNeutalBigscreen,
      },
    ],
  },
  {
    path: '/test',
    name: 'test',
    component: Test,
  },
]

routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/pagetwo',
    name: 'PageTwo',
    component: PageTwo,
    beforeEnter: protectedRoute,
  },
]

routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  ...modules,
  {
    path: '/contact',
    name: 'Contact',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "contact" */ '../views/Contact.vue')
  },
  {
    path: '/tests',
    name: 'Tests',
    component: () =>
      import(/* webpackChunkName: "Test" */ '../views/test/Test.vue')
  }
]

AboutRouter: RouteRecordRaw = {
  path: '/about',
  name: 'about',
  component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
  children: [
    {
      path: 'me',
      name: 'aboutMe',
      component: () =>
        import(/* webpackChunkName: "about-me" */ '@/views/AboutMe.vue')
    }
  ]
}

routes: RouteRecordRaw[] = [
  {
    path: "/",
    component: () => import("./Layout.vue"),
    children: [
      ...demos,
      { path: "", component: () => import("./Welcome.vue") },
    ],
  },
  {
    path: "/:pathMatch(.*)*",
    redirect: "/",
  },
]

demos: RouteRecordRaw[] = Object.entries(modules).map(
  ([path, imp]) => {
    return {
      path: encodeURIComponent(path),
      component: imp,
      meta: {
        name: getNameFromPath(path),
      },
    }
  }
)

routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: () => import('./pages/home.vue'),
  },
  {
    name: 'about',
    path: '/about',
    component: () => import('./pages/about.vue'),
  },
  {
    name: 'repos',
    path: '/repos',
    component: () => import('./pages/repos.vue'),
  },
]

routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
    path: '/detail/:id',
    name: 'Detail',
    component: () => import('../views/Detail.vue'),
  },
]

filterRouteByRole = (routes: RouteRecordRaw[], ROLE: number) => {
  const filterChildrenByRole = (currentRoutes: RouteRecordRaw[]): RouteRecordRaw[] => {
    const result: RouteRecordRaw[] = [];

    currentRoutes.forEach((route) => {
      const { role } = (route.meta as IAuth) || {};

      if (role == undefined || role == ROLE) {
        if (route.children) {
          route.children = filterChildrenByRole(route.children);
        }
        result.push(route);
      }
    });

    return result;
  };

  return filterChildrenByRole(routes);
}

// 过滤路由属性 hideInMenu hideChildInMenu
export function clearMenuItem(menusData: RouteRecord[] | RouteRecordRaw[]): RouteRecordRaw[] {
  const filterHideMenus = menusData
    .map((item: RouteRecord | RouteRecordRaw) => {
      const finalItem = { ...item };
      if (!finalItem.name || finalItem.meta?.hideInMenu) {
        return null;
      }

      if (finalItem && finalItem?.children) {
        if (
          !finalItem.meta?.hideChildInMenu &&
          finalItem.children.some(
            (child: RouteRecord | RouteRecordRaw) => child && child.name && !child.meta?.hideInMenu,
          )
        ) {
          return {
            ...item,
            children: clearMenuItem(finalItem.children),
          };
        }
        delete finalItem.children;
      }
      return finalItem;
    })
    .filter((item) => item) as IRouteRecordRaw[];

  //

  return filterHideMenus;
}

constantRoutes: RouteRecordRaw[] = [
  {
    path: '/login',
    component: () => import('/@/views/login/index.vue'),
    name: 'login',
    meta: { title: '登录' },
  },
  {
    path: '/',
    name: 'Root',
    redirect: '/app',
    meta: {
      title: 'Root',
    },
  },
  // ...accessRoutes,
]

filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]): RouteRecordRaw[] => {
  const res: RouteRecordRaw[] = [];
  routes.forEach((route) => {
    const { auth } = (route.meta as IAuth) || {};
    if (!auth) {
      if (route.children) {
        route.children = filterAsyncRoutes(route.children, roles);
      }
      res.push(route);
    } else {
      if (intersection(roles, auth).length > 0) {
        if (route.children) {
          route.children = filterAsyncRoutes(route.children, roles);
        }
        res.push(route);
      }
    }
  });
  return res;
}

routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: Home,
    name: 'Home',
  },
  {
    path: '/detail/:id',
    component: () => import('../views/Detail.vue'),
    name: 'Detail',
  },
]

router = createRouter({
  history: createWebHistory(),
  strict: true,
  routes: [
    { path: '/home', redirect: '/' },
    {
      path: '/',
      name: 'Layout',
      component: AppLayout,
      redirect: '/grid',
      children: menus.reduce((prev, item) => {
        const _routes = item.items.map(i => {
          return {
            path: `/${i.name.toLowerCase()}`,
            name: i.name,
            component: i.component,
          }
        })
        prev.push(..._routes)
        return prev
      }, [] as RouteRecordRaw[]),
    },
  ],
})

routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/detail/:id',
    component: () => import('../views/Detail.vue'),
    name: 'Detail',
  },
]

routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/detail/:id',
    component: () => import('../views/Detail.vue'),
    name: 'Detail',
  },
]

routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
]

viteSSR: SsrHandler = function viteSSR(
  App,
  {
    routes,
    base,
    routerOptions = {},
    pageProps = { passToPage: true },
    ...options
  },
  hook
) {
  if (pageProps && pageProps.passToPage) {
    addPagePropsGetterToRoutes(routes)
  }

  return coreViteSSR(options, async (context, { isRedirect, ...extra }) => {
    const app = createApp(App)

    const routeBase = base && withoutSuffix(base(context), '/')
    const router = createRouter({
      ...routerOptions,
      history: createMemoryHistory(routeBase),
      routes: routes as RouteRecordRaw[],
    })

    router.beforeEach((to) => {
      to.meta.state = extra.initialState || null
    })

    provideContext(app, context)

    const fullPath = getFullPath(context.url, routeBase)

    const { head } =
      (hook &&
        (await hook({
          app,
          router,
          initialRoute: router.resolve(fullPath),
          ...context,
        }))) ||
      {}

    app.use(router)
    router.push(fullPath)

    await router.isReady()

    if (isRedirect()) return {}

    Object.assign(
      context.initialState || {},
      (router.currentRoute.value.meta || {}).state || {}
    )

    const body = await renderToString(app, context)

    if (isRedirect()) return {}

    const {
      headTags = '',
      htmlAttrs = '',
      bodyAttrs = '',
    } = head ? renderHeadToString(head) : {}

    return { body, headTags, htmlAttrs, bodyAttrs }
  })
}

viteSSR: ClientHandler = async function viteSSR(
  App,
  {
    routes,
    base,
    routerOptions = {},
    pageProps = { passToPage: true },
    debug = {},
    ...options
  },
  hook
) {
  if (pageProps && pageProps.passToPage) {
    addPagePropsGetterToRoutes(routes)
  }

  const app = createSSRApp(App)

  const url = new URL(window.location.href)
  const routeBase = base && withoutSuffix(base({ url }), '/')
  const router = createRouter({
    ...routerOptions,
    history: createWebHistory(routeBase),
    routes: routes as RouteRecordRaw[],
  })

  const context: Context = await createClientContext({
    ...options,
    url,
    spaRedirect: (location) => router.push(location),
  })

  provideContext(app, context)

  let entryRoutePath: string | undefined
  let isFirstRoute = true
  router.beforeEach((to) => {
    if (isFirstRoute || (entryRoutePath && entryRoutePath === to.path)) {
      // The first route is rendered in the server and its state is provided globally.
      isFirstRoute = false
      entryRoutePath = to.path
      to.meta.state = context.initialState
    }
  })

  if (hook) {
    await hook({
      app,
      router,
      initialRoute: router.resolve(getFullPath(url, routeBase)),
      ...context,
    })
  }

  app.use(router)

  if (debug.mount !== false) {
    // this will hydrate the app
    await router.isReady()
    // @ts-ignore
    app.mount(`#${__CONTAINER_ID__}`, true)
    // it is possible to debug differences of SSR / Hydrated app state
    // by adding a timeout between rendering the SSR version and hydrating it later
    // window.setTimeout(() => {
    //   console.log('The app has now hydrated');
    //   router.isReady().then(() => {
    //     app.mount('#app', true);
    //   });
    // }, 5000);
  }
}

modules: Array<RouteRecordRaw> = []

AboutRouter: RouteRecordRaw = {
  path: '/tsxtest',
  name: 'tsxtest',
  component: () =>
    import(/* webpackChunkName: "tsxtest" */ '@/views/TsxPage.tsx')
}

export function setupRouter(i18n: I18n): Router {
  const locale = getLocale(i18n)

  // setup routes
  const routes: RouteRecordRaw[] = [
    {
      path: '/:locale/',
      name: 'home',
      component: Home
    },
    {
      path: '/:locale/about',
      name: 'about',
      component: About
    },
    {
      path: '/:pathMatch(.*)*',
      redirect: () => `/${locale}`
    }
  ]

  // create router instance
  const router = createRouter({
    history: createWebHistory(),
    routes
  })

  // navigation guards
  router.beforeEach(async to => {
    const paramsLocale = to.params.locale as string

    // use locale if paramsLocale is not in SUPPORT_LOCALES
    if (!SUPPORT_LOCALES.includes(paramsLocale)) {
      return `/${locale}`
    }

    // load locale messages
    if (!i18n.global.availableLocales.includes(paramsLocale)) {
      await loadLocaleMessages(i18n, paramsLocale)
    }

    // set i18n language
    setI18nLanguage(i18n, paramsLocale)
  })

  return router
}

accessRoutes: RouteRecordRaw[] = [
  {
    path: '/app',
    name: 'app',
    component: BasicLayout,
    redirect: '/app/home',
    meta: { title: '管理平台' },
    children: [
      {
        path: '/app/home',
        component: () => import('/@/views/home/index.vue'),
        name: 'home',
        meta: {
          title: '首页',
          icon: 'liulanqi',
          auth: ['home'],
        },
      },
      {
        path: '/app/website',
        name: 'website',
        component: () => import('/@/views/website/index.vue'),
        meta: {
          title: '网站管理',
          keepAlive: true,
          icon: 'jiedianguanli',
          auth: ['website'],
        },
      },
      {
        path: '/app/others',
        name: 'others',
        component: BlankLayout,
        redirect: '/app/others/about',
        meta: {
          title: '其他菜单',
          icon: 'xitongrizhi',
          auth: ['others'],
        },
        children: [
          {
            path: '/app/others/about',
            name: 'about',
            component: () => import('/@/views/others/about/index.vue'),
            meta: { title: '关于', keepAlive: true, hiddenWrap: true },
          },
          {
            path: '/app/others/antdv',
            name: 'antdv',
            component: () => import('/@/views/others/antdv/index.vue'),
            meta: { title: '组件', keepAlive: true, breadcrumb: true },
          },
        ],
      },
      {
        path: '/sys/account',
        name: 'account',
        component: () => import('/@/views/account/index.vue'),
        meta: { title: '用户管理', keepAlive: true, breadcrumb: true },
      },
    ],
  },
]

routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "loading",
    component: LoadingView,
    meta: { fullPage: true }
  },
  {
    path: "/add",
    name: "add-wallet",
    component: AddView,
    props: true,
    meta: { fullPage: true, title: "Add new wallet" }
  },
  {
    path: "/add/read-only",
    name: "add-read-only-wallet",
    component: AddReadOnlyView,
    meta: { fullPage: true, title: "Add read-only wallet" }
  },
  {
    path: "/add/restore",
    name: "restore-wallet",
    component: RestoreView,
    meta: { fullPage: true, title: "Restore a standard wallet" }
  },
  {
    path: "/add/new",
    name: "add-standard-wallet",
    component: AddStandardView,
    meta: { fullPage: true, title: "Add new standard wallet" }
  },
  {
    path: "/add/hw/ledger",
    name: "add-hw-ledger",
    component: ConnectLedgerView,
    meta: { fullPage: true, title: "Connect a hardware wallet" }
  },
  {
    path: "/assets",
    name: "assets-page",
    component: AssetsView
  },
  {
    path: "/assets/nft",
    name: "nft-gallery",
    component: NftGalleryView
  },
  {
    path: "/receive",
    name: "receive-page",
    component: ReceiveView
  },
  {
    path: "/send",
    name: "send-page",
    component: SendView
  },
  {
    path: "/about",
    name: "about-nautilus",
    component: AboutView
  },
  {
    path: "/connector/auth",
    name: "connector-auth",
    component: AuthView,
    meta: { title: "Access request" }
  },
  {
    path: "/connector/connections",
    name: "connector-connected",
    component: ConnectionsView
  },
  {
    path: "/connector/sign/tx",
    name: "connector-sign-tx",
    component: SignTxConfirmView,
    meta: { title: "Transaction signature" }
  },
  {
    path: "/wallet/settings",
    name: "wallet-settings",
    component: SettingsView
  }
]

usePermissioStore = defineStore({
  id: 'app-permission',
  state: (): PermissioState => ({
    // isGetUserInfo
    isGetUserInfo: false,
    // isAdmin
    isAdmin: 0,
    // auths
    auths: [],
    // modules
    modules: [],
    // role 0-银行 1-银保监
    role: 0,
  }),
  getters: {
    getAuths(): string[] {
      return this.auths;
    },
    getRole(): 0 | 1 {
      return this.role;
    },
    getModules(): string[] {
      return this.modules;
    },
    getIsAdmin(): 0 | 1 {
      return this.isAdmin;
    },
    getIsGetUserInfo(): boolean {
      return this.isGetUserInfo;
    },
  },
  actions: {
    setAuth(auths: string[], modules: string[]) {
      this.auths = auths;
      this.isGetUserInfo = true;
      this.modules = modules;
    },
    setIsAdmin(isAdmin: 0 | 1) {
      this.isAdmin = isAdmin;
    },
    resetState() {
      this.isGetUserInfo = false;
      this.isAdmin = 0;
      this.auths = [];
      this.modules = [];
      this.role = 0;
    },

    /**
     * @name fetchAuths
     * @description 获取当前用户权限
     */
    async fetchAuths() {
      const res = await fetchApi.permission();
      if (res) {
        this.setAuth(res.auths, res.modules);
        this.setIsAdmin(res.is_admin || 0);
      }
      return res;
    },

    /**
     * @name buildRoutesAction
     * @description: 获取路由
     */
    async buildRoutesAction(): Promise<RouteRecordRaw[]> {
      // 404 路由一定要放在 权限路由后面
      let routes: RouteRecordRaw[] = [...constantRoutes, ...accessRoutes, ...publicRoutes];

      if (this.getIsAdmin !== 1) {
        // 普通用户
        // 1. 方案一：过滤每个路由模块涉及的接口权限，判断是否展示该路由
        // 2. 方案二：直接检索接口权限列表是否包含该路由模块，不做细分，axios同一拦截
        routes = [
          ...constantRoutes,
          ...filterAsyncRoutes(accessRoutes, this.modules),
          ...publicRoutes,
        ];
      }

      return routes;
    },

    // /**
    //  * @name buildRoutesAction
    //  * @description: 获取路由
    //  */
    // buildRoutesAction(): RouteRecordRaw[] {
    //   // this.isGetUserInfo = true;
    //   this.setIsGetUserInfo(true);

    //   // 404 路由一定要放在 权限路由后面
    //   let routes: RouteRecordRaw[] = [...constantRoutes, ...accessRoutes, ...publicRoutes];

    //   // 1. 角色权限过滤：0-银行 1-银保监
    //   let filterRoutes = filterRouteByRole(cloneDeep(accessRoutes), this.role);
    //   // let filterRoutes = routes;

    //   // 2. 菜单权限过滤：
    //   // 管理员直接跳过
    //   if (this.getIsAdmin === 0) {
    //     const filterRoutesByAuth = filterAsyncRoutes(cloneDeep(filterRoutes), this.modules);
    //     filterRoutes = filterRoutesByAuth;
    //   }

    //   // 普通用户
    //   // 1. 方案一：过滤每个路由模块涉及的接口权限，判断是否展示该路由
    //   // 2. 方案二：直接检索接口权限列表是否包含该路由模块，不做细分，axios同一拦截
    //   routes = [...constantRoutes, ...filterRoutes, ...publicRoutes];

    //   return routes;
    // },
  },
})

routes: Array<RouteRecordRaw> = [
    /**
     * Main pages
     */
    {
        path: "/",
        name: "Projects",
        component: Projects
    },
    {
        path: "/New",
        name: "NewProject",
        component: NewProject
    },
    {
        path: "/Editor",
        name: "Editor",
        component: Editor
    },

    /**
     * Modals, that will be open in an other renderer page using electron
     */
    {
        path: "/Modals",
        name: "Modals",
        component: Modals,
        children: [
            /**
             * Settings
             */
            {
                path: "Settings",
                component: Settings
            },
            /**
             * Groups
             */
            {
                path: "Groups/Rename",
                component: RenameGrp
            },
            {
                path: "Groups/Add",
                component: AddGrp
            },
            {
                path: "Groups/Duplicate",
                component: DuplicateGrp
            },
            /**
             * Blueprint
             */
            {
                path: "Blueprint",
                component: Blueprint
            },
            /**
             * Transformation
             */
            {
                path: "Transformation/Rotation",
                component: TransformRotation
            },
            {
                path: "Transformation/Translation",
                component: TransformTranslation
            },
            {
                path: "Transformation/Scale",
                component: TransformScale
            },
            /**
             * Duplicate visible
             */
            {
                path: "DuplicateVisible",
                component: DuplicateVisible
            },
            /**
             * Help
             */
            {
                path: "About",
                component: About
            }
        ]
    }
]