vue-router#createWebHistory TypeScript Examples

The following examples show how to use vue-router#createWebHistory. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

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

Example #2

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

6 votes

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

Example #3

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

5 votes

history = createWebHistory()

Example #4

Source File: main.ts From ncov with MIT License

5 votes

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

Example #5

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

5 votes

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

Example #6

Source File: index.ts From quasar-app-extension-http-authentication with MIT License

5 votes

export default function createRouter () {
  return _createRouter({
    // use appropriate history implementation for server/client
    // import.meta.env.SSR is injected by Vite.
    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
    routes
  })
}

Example #7

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

5 votes

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

Example #8

Source File: index.ts From rabbit-ui with MIT License

5 votes

routerHistory = createWebHistory()

Example #9

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
}

Example #10

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

Example #11

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

5 votes

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

Example #12