vue-router createRouter TypeScript Examples

Source File: router.ts From elenext with MIT License

6 votes

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[]),
    },
  ],
})

Source File: index.ts From theila with Mozilla Public License 2.0

6 votes

router = createRouter({
  history: createWebHistory(),
  routes,
})

Source File: router.ts From image-optimizer with MIT License

6 votes

router = createRouter({
  linkActiveClass: 'active',
  history,
  routes: [
    {
      path: '/',
      component: () => import('./views/Main.vue')
    },
    {
      path: '/settings',
      meta: { title: 'Test page' },
      component: () => import('./views/Settings.vue')
    }

  ]
})

Source File: main.ts From formkit with MIT License

6 votes

router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      component: BasicForm,
    },
    {
      path: '/basic-form',
      component: BasicForm,
    },
    {
      path: '/custom-input',
      component: CustomInput,
    },
    {
      path: '/file-upload',
      component: FileUpload,
    },
    {
      path: '/group',
      component: GroupInput,
    },
    {
      path: '/tsx',
      component: TSXExample,
    },
    {
      path: '/plugin-schema',
      component: ModifySchema,
    },
  ],
})

Source File: index.ts From code996 with The Unlicense

6 votes

router = createRouter({
  history: createWebHashHistory('/'),
  routes: [
    {
      path: '/',
      name: 'index',
      component: Intro,
      meta: { title: 'code996' },
    },
    {
      path: '/result',
      name: 'result',
      component: Result,
      meta: { title: 'result | code996' },
    },
  ],
})

Source File: entry-server.ts From vite-ssr with MIT License

5 votes

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 }
  })
}

Source File: main.ts From vue-components-lib-seed with MIT License

5 votes

router = createRouter({
  history: createWebHashHistory(),
  routes,
})

Source File: main.ts From ncov with MIT License

5 votes

router = createRouter({
    history: createWebHistory(),
    routes
})

Source File: index.ts From vite-plugin-monaco-editor with MIT License

5 votes

router = createRouter({
  history: createWebHistory(),
  routes,
})

Source File: index.ts From vue3-cesium-typescript-start-up-template with MIT License

5 votes

router = createRouter({
  history: createWebHashHistory(),
  // history: createWebHistory(),
  routes,
})

Source File: index.ts From elec-sqlite-vue with GNU General Public License v3.0

5 votes

router = createRouter({
  history: createWebHashHistory(),
  routes
})

Source File: index.ts From gitmars with GNU General Public License v3.0

5 votes

router = createRouter({
    history: createWebHashHistory(),
    // @ts-expect-error
    routes
})

Source File: index.ts From Vue3-Vite-Vuetify3-Typescript-Template with MIT License

5 votes

router = createRouter({
  history: createWebHistory(),
  routes,
})

Source File: router.ts From vue-i18n-next with MIT License

5 votes

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
}

Source File: index.ts From vue3-ts-base with MIT License

5 votes

router = createRouter({
  history: createWebHashHistory(),
  routes
})

Source File: router.ts From hexon with GNU General Public License v3.0

5 votes

router = createRouter({ history: createWebHashHistory(), routes })

Source File: router.ts From hexon with GNU General Public License v3.0

5 votes

router = createRouter({ history: createWebHashHistory(), routes })

Source File: main.ts From vueconf-london with MIT License

5 votes

router = createRouter({
  history: createWebHistory(),
  routes,
})

Source File: entry-client.ts From vite-ssr with MIT License

5 votes

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);
  }
}

Source File: router.ts From malagu with MIT License

5 votes

router = createRouter({
  history: createWebHashHistory(),
  routes,
})

Source File: router.ts From nautilus-wallet with MIT License

5 votes

router = createRouter({
  history: createWebHashHistory(),
  routes
})

Source File: index.ts From project_nodeSnap with GNU General Public License v3.0

5 votes

router = createRouter({
    history: createWebHashHistory(),
    routes
})