Changing the route mixin

In the previous recipe, we used a changeComponent mixin. Now that we are going to work with routes, we need to change this mixin to a changeRoute mixin and alter its behavior. In the following steps, we will change how the mixin works, to be able to change the route instead of the component:

1. In the src/mixin folder, rename changeComponent.js to changeRoute.js and open it.

2. We will remove the changeComponent method and create a new one called changeRoute. This new method will receive two arguments, name and id. The name argument is the route name, as set in the vue-router configuration and the id will be the user id that we will pass a parameter in the route change. This method will execute $router.push, passing those arguments as the parameters:

export default {
  methods: {
    async changeRoute(name, id = 0) {
      await this.$router.push({
        name,
        params: {
          id,
        },
      });
    },
  }
}