router-view and routing

[Credo]

Hi
I’m trying to build my first website and I have chosen quasar.
But I don’t seem to understand how quasar’s(or maybe vue’s) routing system works. It seems that I should add my routes to the routing.js file like below:

routes: [
{ path: ‘/’, component: load(‘Index’) }, // Default
{ path: ‘/main’, component: load(‘mainLayout’) },
{ path: ‘*’, component: load(‘Error404’) } // Not found
]

But this doesn’t work. localhost:8080/main, redirects to http://localhost:8080/main#/ which renders the default view. Actually even the 404 page doesn’t appear if I go to an undefined route and it still gives the default view.
What should I do?
Also, is it correct to say that <router-view></router-view> renders whatever template the routing system tells it to? Does it mean I don’t need to add my components manually to App.vue?
Thanks

[benoitranque]

This is a vue-router issue, not a quasar issue. Read the vue-router docs.

In vue-router the order you add routes in matters, a lot. The first match is what gets rendered.

You do not need to add the slashes in your routes

Yes, you do not need to add components to App.vue, only un your router file.

[s.molinari]

Try adding the “exact” prop in your links.

 <q-drawer-link icon="assignment_ind" to="/about" exact>
    About
 </q-drawer-link>

Scott

[rof20004]

It is not a vue or quasar issue(based in your provided code), I think, you need to read the docs and understand how router works.

[rstoenescu]

@Credo Read about configuring Vue Router in hash vs history mode. You are trying to access a path as if your Vue Router was configured to history mode ( http://localhost:8080/main), but the #/ at the end shows your Vue Router is in the default hash mode. http://router.vuejs.org/en/essentials/history-mode.html