Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.