![]() If we click on any of the posts on the home page that does not require us to scroll, we would not notice any weird behavior scroll wise, but if we scroll down a little and click on the last post in this list, this should be the position the /post page would land on: Default scroll position. The top of this page looks like this: Top of post page. We’re also decoupling the router param (in this case, post and id) using props. Here, we define a new route that makes use of id that would be passed to this route from the homepage. Import ( /* webpackChunkName: "post" */ './views/Post.vue') Update your index.js file in the /router folder ( or router.js file) to look like this: The next thing would be to create a route that would display each post. This is because we need the page to have a height that is more than the default height 100vh so we can observe the default scroll behavior of the router. We also add styling for the page in the styling section, which includes defining a height of 110vh. Finally, we add a paragraph to the end of the page. We then make use of this post value in the template section to display post title and body. This is a neat way of accessing route params and query as opposed to doing this: Here, we make use of passing props to route components to define id and post which we’re passing from the previous page in the form of route params. The next thing would be to create the page that will display the info for each post and create a link for it in the router of our app. We have also added a paragraph that would serve as a loading indicator.Īt this point, here’s what this page looks like: List of posts from JSONPlaceholder. After this, we loop through the array of posts in a list ( ) and also attach a link to each post using id of each post as the link param (this is called dynamic route matching). We’re also assigning the array of posts gotten from this API call to posts from the data function from this page, this is because we want to use this data in our template section. Here, we’re importing axios and using it to fetch a list of posts from JSONPlaceholder in the getPost method. To install Axios: # using YARNĪfter installing Axios, we can update our Home.vue to look like this:Īnimation: blink 0.8s ease-in-out infinite alternate both We will also need to make API calls to JSONPlaceholder, to illustrate some of the concepts using Vue router. I have created a Vue application using the Vue CLI command vue create vue-router-demo, I also selected Vue Router as part of the options while setting up my app because we will be using it throughout this tutorial. What this means is, if you click on a link that leads to a new route ( i.e from /home to /about) in a position that is let’s say close to the footer of the current page, the new page would start from that same position instead of starting from the top of the page. ![]() This is because, by default, the scroll position when navigating away from a page is maintained on a new page. ![]() The default behavior of Vue router is only noticeable after scrolling to a position that isn’t the top of the page. This is the behavior that is observed when navigating from one page to another. Note: This article requires a basic understanding of Vuejs and Vue Router. If you are interested in doing more with the router, you’ll benefit from this tutorial. You can find all the code used in this article on GitHub. But the Vue Router has some very useful features that can be very helpful in development and in this article, we’re going to take a look at them.įor the purpose of this tutorial, we’re going to be building a simple application that would help in understanding some of the concepts covered in this article. These features are heavily used when developing with Vue and this is because they are part of the basics you need to understand to efficiently use the Router. It deeply integrates with Vue core to make building Single Page Applications with Vue a breeze. ![]() Vue Router is the official router for Vue. In this tutorial, we’re going to learn about some amazing features the Vue Router has and how we can make use of them in our app. Vue Router is the official router for Vue that is mostly used for creating multiple pages living on different routes ( /home, /profile) in your application but has some features that some people do not know about. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |