Please enable JavaScript.
Coggle requires JavaScript to display documents.
08. INTRODUCING VUE-ROUTER AND LOADING URL-BASED COMPONENTS (Nesting and…
08. INTRODUCING VUE-ROUTER AND LOADING URL-BASED COMPONENTS
Initializing Vue-router and its options
The next step is to give the router a placeholder to render the components in the view. This is done by using a custom <router-view> HTML element. Using this element gives you control over where your content will render. It allows us to have a header and footer right in the app view, without needing to deal with messy templates or includes the components themselves
Each route object contains a path and component key. The path is a string of the URL that you want to load the component on. Vue-router serves up components based on a first-come-first-served basis. For example, if there are several routes with the same path, the first one encountered is used
Vue-router is also able to use the JavaScript history API to create prettier URLs. For example, yourdomain.com/index.html#about would become yourdomain.com/about. This is activated by adding mode: 'history' to your VueRouter instance
There may be scenarios where you want to host your Vue app in a sub-folder of your website. In this instance, you will need to declare the base folder of your project so Vue-router can construct, and listen out for, the correct URLs
Creating links with Vue-router
Links can be achieved in two ways: we can use a conventional <a href="#/about"> tag, or alternatively we can utilize a new HTML element provided with the router of <router-link to="/about">
If you inspect the links with the browser's HTML inspector, you will notice the change in CSS classes. The Home link will always have a class of router-linkactive—this is because it is either active itself, or it has an active child, such as the About page. There is another CSS class which gets added and removed as you navigate between the two pages—router-link-exact-active. This only gets applied to the links on the currently active page
Making dynamic routes to update the View based on URL
Using props with URLs
Props only work with the dynamic routes—GET parameters would still be accessed with the preceding technique
Before the props work, Vue-router needs to be told to use them with a particular route. This is enabled within the routes array, on a route-by-route basis and, initially, is set with a props: true value
When passing the props object in via the URL, it overwrites the whole props object, meaning you either have to declare none or all of them. The props variables will also take priority over the dynamic, URL-based variables
Nesting and naming routes
Nested routes differ from sub-routes as they exist within a component already matching the beginning part of a route. This allows you to show different content within an existing view
We create an array inside the /about route—with the key of children. The syntax of this array is an exact replica of the main array—that is, an array of route objects
The thing to note about the path is that it shouldn't start with a / if you want the path to be added to the end of the parent
Naming components
Debug easily
Naming routes
Another advantage of using named routes is being
able to pass specific attributes to our dynamic paths
Named views
It's advisable to leave your main route unnamed, so you don't need to update every route. If you decide to name your main route, you would be required to do this next step for every route in your app
How to navigate programmatically with Vue-router
Use a push() function on the router instance. The value of push can either be a string for a direct URL or it can accept an object to pass named routes or route parameters. The allowed contents of the push function are exactly the same as the to="" attribute on the router-link element
redirect
alias