[Nuxt.js][Cookbook] Execute event when $route changes

Sometimes we need to check $route was changed. At that time this cookbook helps you.

Problem

My application has Header component that has some list items.

In my Header, I'm tracking the status of list displaying using isActive property.

This is my part of the source code.

It’s work, but there is one problem. Although route is changed, menu is displayed until I’ll click button.

What I want?

When route is changed, isActive property will be changed to false.

Solution

In Nuxt.js(and vue.js), there is watch property for observing value's change.

I’ll modify my previous source code to observe the change of the route.

Through this 5 lines simple code, you will be able to observe route change.

Conclusions

Using Nuxt.js, we can create SPA(or SSR) application easily. But I cannot found some way to control data in official document.

I’ll give you a hint through cookbooks! I hope it will help you!

Write Medium in Markdown? Try Markdium!