%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper,headsepline,footsepline]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
% Funktioniert nicht \usepackage[automark]{scrpage2}%
\usepackage[automark]{scrlayer-scrpage}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

% Single quotes
\usepackage{upquote,textcomp}

% mehrere Spalten
\usepackage{multicol}

% Verbatim mit Rahmen
\usepackage{fancyvrb}

%Kopfzeile
\ihead{Svelte 5}
\chead{}
\ohead{http://kohnlehome.de/js/sveltekit-routing.pdf}
%\setheadsepline{0.5pt}

%Fußzeile
%\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Single Quotes
\newcommand\upquote[1]{\textquotesingle#1\textquotesingle}

% Überschrift 
\begin{center}
  \LARGE % Schriftgröße
  \bfseries % Fettdruck
  \sffamily % Serifenlose Schrift
  SvelteKit: Routing
\end{center}



\section*{Ordnerstruktur}

\begin{verbatim}
src/routes/
       |- ordner1/
       |      |- +page.svelte          <- /ordner1
       |
       |- ordner2/
       |      |- +page.svelte          <- /ordner2
       |
       |- ordner3/[slug]/
       |            |- +page.svelte    <- /ordner3/xyz123
       |
       |- +page.svelte                 <- /
       |
       |- +layout.svelte
\end{verbatim}



\section*{+layout.svelte}
\begin{verbatim}
<script>
  let { children } = $props();
</script>

  ...
<Komponente />
  ...
{@render children()}                   <- jeweilige +page.svelte
  ....
\end{verbatim}



\section*{+page.svelte}
\begin{verbatim}
<script>
  import { goto } from "$app/navigation";
  ...
  goto('/ordner3/xyz123');            <- Springt zu /ordner3/xyz123
</script> 

<a href="/ordner3/xyz123"> ... </a>   <- Springt zu /ordner3/xyz123
\end{verbatim}



\section*{ordner3/[slug]/+page.svelte}
\begin{verbatim}
<script>
  let data = $props();
  ...
  const daten = data.params.slug; // xyz123
</script> 
\end{verbatim}



\end{document}
