Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

How to achieve the nuxt 2 routing structure below in Sveltekit using a single +page.svelte?

$
0
0

I am trying to port a nuxt 2 web app to Sveltekit (version 5 I guess) and have run into this hiccup with respect to urls and routing.

Route Structure in Nuxt 2

routes.js

I am trying to achieve the following route for a master detail view

RouteWhat is shown on desktopWhat is shown on mobile
example.comlist + detaillist
example.com/news/<item-id>/<title>list + detaildetail
example.com/news?filter=<some-filter>&search=<search-term>list + detaillist
example.com/news/<some-tag>list + detaillist
example.com/news/<some-tag>?filter=<some-filter>&search=<search-term>list + detaillist
example.com/news/<some-tag>/<item-id>/<title>list + detaildetail

The code for the above routing structure in nuxt 2 using @nuxtjs/router looks like this

  {    path: '/news/:tag?',    alias: '/',    component: Index,    children: [      {        path: '',        name: 'NewsList',        component: NewsListWrapper,        props: true,      },      {        path: '/news/:tag?/:id([a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12})/:title',        name: 'NewsDetail',        component: NewsDetailWrapper,        props: true,      },    ],  },

The above index component in Nuxt 2 handles everything

I am trying to translate this routing structure to SvelteKit and I am running into trouble. I'm a beginner in SvelteKit.

Route Structure in SvelteKit

src/routes/├──+page.svelte               # Handles example.com├── news/│├──+page.svelte           # Handles example.com/news and query parameters│├── [tag]/││├──+page.svelte       # Handles example.com/news/<some-tag> and query parameters││├── [item-id]/│││└── [title]/│││└──+page.svelte # Handles example.com/news/<some-tag>/<item-id>/<title>│└── [item-id]/│└── [title]/│└──+page.svelte   # Handles example.com/news/<item-id>/<title>

There are 4 +page.svelte components. How to achieve the same layout as Nuxt 2 using a single +page.svelte?


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>