Пример для Vue

Так как библиотека роутинга — сложный интеграционный пакет, требующий сервера для SSR и работы с History API, Live Preview недоступно. Однако вы можете загрузить готовые примеры.

Предпросмотр

src

components

App.vue

Link.vue

LinkProps.vue

pages

dynamic

Dynamic.vue

index.ts

error

Error.vue

index.ts

home

Home.vue

index.ts

prevent

index.ts

Prevent.vue

query

index.ts

Query.vue

static

index.ts

Static.vue

client.ts

declarations.d.ts

router.ts

server.ts

style.module.css

template.html

build.ts

package.json

tsconfig.json

import { createApp, createSSRApp } from 'vue';

import App from './components/App.vue';
import { getRouter, routerStoreKey } from './router';

const router = getRouter();

await router.init(location.href, { skipLifecycle: Boolean(SSR_ENABLED) });

if (SSR_ENABLED) {
  createSSRApp(App, { router }).provide(routerStoreKey, { router }).mount('#example-app');

  console.log('SSR: App has been hydrated, no lifecycle called');
} else {
  createApp(App, { router }).provide(routerStoreKey, { router }).mount('#example-app');

  console.log('CSR: App has been rendered and lifecycle called');
}

Скачивание

npx degit dkazakov8/reactive-route/examples/vue vue-example
cd vue-example
npm install

Затем выберите режим и систему реактивности для запуска:

• npm run vue — CSR (только клиентский рендеринг) для реактивности Vue
• npm run ssr-vue — SSR для реактивности Vue