⚠️ This lesson is retired and might contain outdated information.

Use Vue Router in TypeScript

Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 9 months ago

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.

egghead
egghead

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today