Now, when we mouseover the router link, it will navigate as shown in the following browser. We can change the same using the event property. eventĪt present, the default event for router-link is click event. This is what is displayed in the browser. We can overwrite it using exact-active-class. The default exactactive class applied is router-link-exact-active. This is the output displayed in the browser. The class used is active_class = ”_active”. We can overwrite the class by setting the same as shown in the following code. active-classīy default, the active class added when the router link is active is router-link-active. We will still see the click going as we click on the router link for navigation. We have specified the tag as span and this is what is displayed in the browser. In case, we want to render it as some other tag, we need to specifty the same using tag = ”tagname” If we want to go from the router link with path /route1 to router link path /route2, it will show the path in the browser as /route1/route2.Īt present renders as a tag. With replace, the navigation history is not stored.Īdding append to the will make the path relative. E.g.: = Tery replaceĪdding replace to the router link will call the router.replace() instead of router.push(). In the URL path, name = Tery is a part of the query string. 3: Router Link 1//router link with query string. When using an object, we need to bind it as shown in e.g. The value needs to be a string or a location object. When clicked, the value of to will be passed to router.push() internally. This is the destination path given to the. Let us see some more properties to be passed to. Another thing to notice is, the gets rendered as a tag. The active link gets the class as shown in the above screenshot. The class added is class = “router-link-exact-active router-link-active”. On inspecting and checking the router link, we will find that it adds class to the active element as shown in the following screenshot. The router object is assigned to the main vue instance using the following piece of code.Įxecute the example and see the display in the browser. The VueRouter constructor takes the routes as the param. Next, the instance is created to VueRouter using the following piece of code. The path from the routes need to match with the router link to the property. route1 will be displayed in the URL when the user clicks on the router link.Ĭomponent takes the templates names to be displayed. Routes define the path and the component. Next, is the routes const, which defines the path to be displayed in the URL. They have templates, which needs to be shown when the router link is clicked. Let us start with a simple example using vue-router.js.Ĭonst Route1 = We can clone the repository from GitHub as follows − Run the following command to install the vue-router. We can download and host it, and use it with a script tag along with vue.js as follows − The above link is always updated to the recent version. The latest version of vue-router is available at We need to follow some additional steps to install it. VueJS does not have a built-in router feauture.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |