AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Vue router example12/20/2023 ![]() ![]() Index.html is where we declare the DOM element- #app- with which we’ll use to mount our Vue application: This project is a simple webpack-configured application scaffolded with vue-cli, the Vue command line interface. Let’s take a brief look within the project directory. When cloned, install the project dependencies with: npm install The easiest way to follow along step-by-step (if you wish to do so) is to clone the GitHub repo I’ve set up. Now that we have an idea of what we’ll be working on, let’s start building! Preparing the App These are some of the main benefits of creating routes within an application. This would allow users to refresh different pages and keep their location in the app, bookmark the URLs to come back to later, and potentially share the URL with others. We’d want our Pokémon app to be accessible and to show different details for different pathnames: /charizard, /blastoise, and /venusaur. ![]() Though the app would functionally work, it misses a substantial feature that’s expected from most web applications- responding to browser navigation events. See the Pen Vue Pokemon by Hassan Dj ( on CodePen. This particular app could be composed of a simple parent-child component hierarchy that uses Vue props to dictate the information that should be displayed. In addition, footer links exist at the bottom of the application to direct the user to each respective route upon click: Do We Even Need Routing for This?įor simple applications like this, we don’t necessarily need a client-side router to make our app functional. Based on the URL route entered, a different Pokémon will be shown: The application will have three unique URL routes: /charizard, /blastoise, and /venusaur. The app we aim to construct is a simple Pokémon app that displays details of a particular Pokémon based on the URL route. Now that we have a brief understanding of client-side routing and SPAs, let’s get an overview of what we’ll be working on! Case Study: Pokémon With routing in SPAs, JavaScript is the driving force that dynamically renders different UI. SPAs are web apps that load only once and are dynamically updated with user interaction without the need to make subsequent requests to the server. Any changes to the application UI based on URL routes are then handled on the client.Ĭlient-side routing is where the term single-page application (or SPA for short) comes in. Client-side routing: the client only makes a request to the server upon initial-page load. ![]() the browser) makes a request to the server on every URL change. Routing is often categorized in two main buckets: Imagine clicking a link and having the URL go from to. In web development, routing often refers to splitting an application’s UI based on rules derived from the browser URL. Though this article assumes basic knowledge in Vue.js we’ll be explaining things thoroughly as we start to write code!įirst and foremost: let’s define routing for those who may be new to the concept. By doing so, we’ll gather an understanding of what needs to be handled to construct client-side routing as well as where potential shortcomings can exist. In this article, we’ll build a simple custom client-side router with Vue. vue-router does a fantastic job by providing us with the items needed to map an application’s components to different browser URL routes.īut, simple applications often don’t need a fully fledged routing library like vue-router. Strict: of tutorials exist that do a great job explaining how Vue’s official routing library, vue-router, can be integrated into an existing Vue application. Vue.component( 'SingleCourse', require( './components/SingleCourse/SingleCourse.vue').default) Vue.component( 'Course', require( './components/common/Course.vue').default) Vue.component( 'PageStudent', require( './components/students/PageStudent.vue').default) Vue.component( 'PageScholar', require( './components/course/PageScholar.vue').default) Vue.component( 'Loading', require( './components/common/Loading.vue').default) ![]()
0 Comments
Read More
Leave a Reply. |