Use Vue Router in TypeScript
vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these new hooks in your class based Vue components in TypeScript. We’ll also go over how we can create and use routes in Vue.
[00:00] In order to do the routing, we need to create another component. Let's call it hello TS. Let's write the template, so hello TS. Now, write the component itself. First, we need to import Vue and component from vue-class-component. Then we need to use the component decorator, and export the class as usual.
[00:31] Now, let's write a created hook, and say hello TS created there, so we can see which component is loaded. Now, we need to add the route. Let's open the router index TS. First, let's import the new component up there, hello TS.
[00:57] Next, we need to create the route for hello TS. Let's name it under /hello-ts. We still need to create some way of navigation between routes. For that, we can use the router link component, which is given by vue-router.
[01:20] Let's link to hello TS from the hello component, and the same the other way around. From hello TS, let's link to hello component. Let's put this under one route element. Now, if we click hello TS, we go to hello TS, and the other way around.
[01:51] We can see the logs in the console, but the created hook is not the ideal one if we want to check when we entered our route. For that, vue-router give us some additional routes, like before route enter. That's use that one in the hello component.
[02:06] If we try this again, we don't see it logging in the console. That's because vue-class-component doesn't know about any additional hooks. We need to register new hooks. Let's create a hooks.ts file. In there, we need to import component from vue-class-component, and we have to call the register hooks method.
[02:32] It dispatch an array of strings with the routes that we want to register. Let's write before route enter, and before route leave. It's important that we call this file before creating the Vue instance. Go to main.ts file, and import the hooks file in there at the beginning.
[02:56] Now, we see that something is wrong. There is something not working with our code. What is happening is that the router hooks are asynchronous. They expect to, from, and next as arguments of the hook method.
[03:10] Let's write a console log there, and let's call next to tell the route to continue. Now, we see enter in the console, so that's working.