The router also keep track of the web history so that you can go back and forwards in the history with the arrows usually located in the top left corner in the web browser next to the URL. We have now created a router that can for example open the 'AnimalCollection' component if '/animals' is added to the end of the original URL address, but it won't work until the next section when we add the component. Lines 19-20 are deleted because the components already get included via the router on lines 11-12. Lines 2, 8-14 and 18 are added to add router functionality. Import ,Īpp.component('food-items', FoodItems) app.component('animal-collection', AnimalCollection) To use routing in Vue on your machine, install the Vue Router library in your project folder using the terminal: With routing set up appropriately, if you open the Vue application with an extension to the URL address, like "/food-items" for example, you will come directly to the part with the food content. In the example above, we can navigate between different content on the page, but we cannot give someone else an address to the page so that they come directly to the part about food, but with routing we can do that. And that means we cannot direct people to other *.html files to show them different content on our page. We build SPAs (Single Page Applications) with Vue, which means that our application only contains one *.html file. This is all we have to do to implement lazy load.I want to learn about at least one new animal every year.Ĭhoose what part of this page you want to see: The About component will only get loaded when a user visits the /about route. Unlike Home, Profile and Product component the About component is not loaded with the app.js. Do you recall this from an earlier example? The About component here is being imported with an arrow function. Take a look at line 17 of router/index.js. import ,Ĭomponent: () => import('./views/About.vue') This file contains all the router configurations. A file named router/index.js file is also generated. Let’s take a look at the folder structure that was created for us.Ī folder named views is created for us along with two files About.vue and Home.vue. For this tutorial we’ll be using history mode, so we’ll select yes. The cli will ask if we want history mode. Next we can add the Vue Router to our project by running the following command. # start your app by running the following command If you don’t have it installed you can install it by running npm install -g # Create a new Vue project Let’s create a new project and get right into coding. Click here to watch the Vue Router course. If you learn better by watching videos, we highly recommend you give it a shot. □ We have also created a completely free in-depth Vue Router video course. Whether you are a beginner just getting into Vue Router or a seasoned JavaScript/Vue developer looking to skill up, there’s something for you in this tutorial. We will go over everything you need to know to use Vue Router comfortably. In this article, we will deep dive into Vue Router 4 (used with Vue 3). Vue Router is simple to use, yet powerful. ![]() Vue Router is the official library for page navigation in Vue applications. Modern single-page apps such as a Vue application can transition from page to page on the client-side (without requesting the server). ![]() One of the most powerful features of modern single-page web applications (SPA) is routing.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |