Something that we haven't touched on yet is what the entry point to our Vue application is. We have seen the Home.vue page, but that is just a component that gets rendered somewhere else. We need to take a step back and see how our Vue application actually handles loading itself and showing the relevant components. While we are doing this, we will also touch on routing in Vue so that we can see how that all hangs together.
Our starting point is found inside the public folder. In there, we have an index.html file, which we can think of as being the master template for our application. It's a fairly standard HTML file—we might want to give it a more suitable title (here, we're going with Advanced TypeScript - Machine Learning):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Advanced TypeScript - Machine Learning</title>
</head>
<body>
<noscript>
<strong>We're sorry but chapter09 doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The important element here is the div with its id property set to app. This is the element into which we are going to render our components. The way we do this is controlled from the main.ts file. Let's start by adding Bootstrap support, both by adding the Bootstrap CSS files and by registering the BootstrapVue plugin using Vue.use:
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
Vue.use(BootstrapVue);
Even though we have Bootstrap support in place, we don't have anything that hooks our components into app div. The reason why we add this support is to create a new Vue application. This accepts a router, a Vue store that is used to contain things such as Vue state and mutations, and a render function, which is called when the component is being rendered. The App component that's passed into our render method is the top-level App component that we will use to render all the other components into. When the Vue application finishes being created, it is mounted into the app div from index.html:
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
Our App.vue template consists of two separate areas. Before we add those areas, let's define the template element and containing div tag:
<template>
<div id="app">
</div>
</template>
Inside this div tag, we are going to add our first logical section—our good old friend, the navigation bar. Since these come in from the Vue Bootstrap implementation, they are all prefixed with b-, but they should need no dissection now, as they should be very familiar by this point:
<b-navbar toggleable="lg" type="dark" variant="info">
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/">Classifier</b-nav-item>
<b-nav-item to="/pose">Pose</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
When the user navigates to a page, we need to display the appropriate component. Under the cover, the component that is displayed is controlled by the Vue router, but we need somewhere to display it. This is accomplished by using the following tag below our navigation bar:
<router-view/>
This is what our App template looks like when it has been completed. As we can see, if we want to route to other pages, we will need to add separate b-nav-item entries to this list. If we wanted to, we could dynamically create this navigation list using v-for in a similar way to what we saw when we were building up the classifications with the image classifier view:
<template>
<div id="app">
<b-navbar toggleable="lg" type="dark" variant="info">
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/">Classifier</b-nav-item>
<b-nav-item to="/pose">Pose</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<router-view/>
</div>
</template>
When we first started looking at routing, all those chapters ago, you possibly thought that routing was a highly complicated thing to add to our applications. By now, you should be a lot more comfortable with routing and it isn't going to be much of a surprise that it is straightforward and simple to add routing support in Vue. We start off by registering the Router plugin inside Vue using the following command:
Vue.use(Router);
With this in place, we are now ready to build routing support. We export an instance of Router that can be used in our new Vue call:
export default new Router({
});
We are now at the point where we need to add our routing options. The first option we are going to set up is the routing mode. We are going to use the HTML5 history API to manage our links:
mode: 'history',
The reason we want to use the history API is that it allows us to modify the URL without triggering full-page refreshes. Since we know that we only want to replace components, rather than replacing the whole index.html page, we end up leveraging this API to only reload the component parts of the page, without doing a full-page reload.
We also want to set the base URL of our application. If we wanted to override this location to serve everything from the deploy folder, for instance, then we would set this to /deploy/:
base: process.env.BASE_URL,
While it is all well and good setting up the routing mode and the base URL, we are missing out on the important part here—setting the routes themselves. At a minimum, each route contains a path and a component. The path relates to the path in the URL, and the component identifies what component will be displayed as a result of that path. Our routes look like this:
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/pose',
name: 'Pose',
component: Pose,
},
{
path: '*',
component: Home,
}
],
One thing we added to our route was a reference to a component that doesn't exist yet. We're going to address that now by adding the Pose component.