CODEWITHSUNDEEP
vuejs3routerlinkvue-router4
MnL
MnL

Reputation: 153

router-link won't load page

Can't find what I am doing wrong. If I type the url on the browser the page does load, but the links from the navbar do nothing. I am trying three different ways to use router-link, but makes no differences. It just won't render the page via link. No errors on the console. On the vue devtools the routing displays the correct path.

App.vue:

<template>
    <nav class="navbar">
      <router-link :to="{ path: '/' }">Home</router-link>
      <router-link :to="{name:'TheDashboard'}"> Dashboard</router-link>
      <router-link to="/games">Games</router-link>
    </nav>
    <router-view></router-view>    
</template>

router/index.js:

import { createRouter, createWebHistory } from 'vue-router'
import TheHomePage from '@/pages/TheHomePage'
import TheDashboard from '@/pages/TheDashboard'

const routes = [
  {
    path: '/',
    name: 'TheHomePage',
    component: TheHomePage
  },
  {
    path: '/dashboard',
    name: 'TheDashboard',
    component: TheDashboard
  },
  {
    path: '/games',
    name: 'TheGames',
    component: () => import(/*webpackChunkName: "games" */ '@/pages/TheGames.vue'),
    props: true
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})


export default router

main.js:

import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'


const prototype = createApp(App)
prototype.use(router)
prototype.use(store)

prototype.mount('#app')

Upvotes: 2

Views: 2245

Answers (2)

MnL
MnL

Reputation: 153

In the end this was a bug caused by Vue devtools. I removed previous versions and updated to latest, and it is now working. Nothing wrong with the code. I thought I might as well leave the code here, since it might be helpful for other people.

Upvotes: 6

Sebas R.
Sebas R.

Reputation: 126

your code seems optimal to me. However, you can use the beforeEach and afterEach hooks to help you to debug your App.

you can read about them here

do something like:

//router/index.js

//...
//const router = ...

router.afterEach((to, from, failure) => {
  console.log('to: ', to);
  console.log('from: ', from);
  if (isNavigationFailure(failure)) {
    console.log('failed navigation', failure)
  }
});

export router;

Upvotes: 1

Related Questions