Routing
Official Router
For most Single Page Applications, it's recommended to use the officially-supported vue-router library. For more details, see vue-router's documentation.
Simple Routing from Scratch
If you only need very simple routing and do not wish to involve a full-featured router library, you can do so with Dynamic Components and update the current component state by listening to browser hashchange
events or using the History API.
Here's a bare-bone example:
<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>
© 2013–present Yuxi Evan You
Licensed under the MIT License.
https://vuejs.org/guide/scaling-up/routing.html