Back

Technologies:

javascriptjavascript
vue.jsvue.js
npmnpm
avatar
Tolerim
a day ago

How come the router push is undefined?

My task is to use vue-router to toggle the nav items. I have installed the dependencies and views in the router index file, but the nav isn't routing the client and throws the error "push is not defined." To troubleshoot this, I will check whether the router is correctly configured and whether the router component is imported into the project. Additionally, I'll verify that the push method is implemented in the correct context. Here is the project files for reference.

import { createApp } from 'vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);

app.mount('#app');

Answers(1)
avatar
Tolerim
a day ago
Verified Answer
It looks like the issue might be with the way you're importing the vue-router library in your Header.vue file. Instead of importing the push method directly from vue-router, you'll want to import it from vue-router using the router instance that you created. Here's an example of how you can do this: 
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div>
      <ul class="navbar-nav">
        <li class="nav-item" @click="goto('/home')">
          <a class="nav-link">Home</a>
        </li>
        <li class="nav-item" @click="goto('/about')">
          <a class="nav-link">About</a>
        </li>
        <li class="nav-item" @click="goto('/contact')">
          <a class="nav-link">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const instance = getCurrentInstance();

    const goto = (route) => {
      instance.proxy.$router.push(route);
    };

    return { goto };
  },
};
</script>
In this example, we're using the getCurrentInstance function from the vue package to get access to the router instance that we created in the router/index.js file. Then, we're defining a goto function that takes a route as an argument and uses the push method on the router instance to navigate to that route. Finally, we're returning the goto function from the setup function so that we can use it in the template. We're also using the instance.proxy property to get access to the Vue instance so that we can access the $router property.
;