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

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

Jangwook Kim
Jun 5 · 1 min read
Image for post
Image for post
The logo of Nuxt.js

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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store