routing

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Client-side vs server-side routing differences

In server-side routing, the server sends a response based on the URL path and the browser receives HTML and reloads the entire page. In client-side routing used by Single-Page Applications (SPAs), client-side JavaScript intercepts navigation, dynamically fetches new data, and updates the current page without full page reloads, resulting in a snappier user experience especially for application-like use cases with many user interactions.

Client-side router responsibilities and browser APIs

A client-side router is responsible for managing the application's rendered view using browser APIs such as the History API or the hashchange event.

Vue Router is the official routing library

Vue Router is the officially-supported library for routing in Single-Page Applications built with Vue. It is recommended for most SPAs.

Simple routing without a library using dynamic components

For simple routing needs without a full-featured router library, you can implement routing using Dynamic Components and listen to browser hashchange events or use the History API to update the current component state.

Example of simple client-side routing with Composition API

The following example demonstrates bare-bones routing using the Composition API: ```vue <script setup> import { ref, computed } from 'vue' import Home from './Home.vue' import About from './About.vue' import NotFound from './NotFound.vue' const routes = { '/': Home, '/about': About } const currentPath = ref(window.location.hash) window.addEventListener('hashchange', () => { currentPath.value = window.location.hash }) const currentView = computed(() => { return routes[currentPath.value.slice(1) || '/'] || NotFound }) </script> <template> <a href="#/">Home</a> | <a href="#/about">About</a> | <a href="#/non-existent-path">Broken Link</a> <component :is="currentView" /> </template> ```

Example of simple client-side routing with Options API

The following example demonstrates bare-bones routing using the Options API: ```vue <script> import Home from './Home.vue' import About from './About.vue' import NotFound from './NotFound.vue' const routes = { '/': Home, '/about': About } export default { data() { return { currentPath: window.location.hash } }, computed: { currentView() { return routes[this.currentPath.slice(1) || '/'] || NotFound } }, mounted() { window.addEventListener('hashchange', () => { this.currentPath = window.location.hash }) } } </script> <template> <a href="#/">Home</a> | <a href="#/about">About</a> | <a href="#/non-existent-path">Broken Link</a> <component :is="currentView" /> </template> ```

Give your agent this brain