Reputation:
I'm wokring in vuejs and by some reason it doesn't display the content when its switching to another route. I have the following code: in App.vue ->
<template>
<div>
<router-view> </router-view>
</div>
</template>
in my routes.js ->
import Support from './components/support/Support.vue';
import Detailed from './components/support/details/Detailed.vue';
export const routes =[
{path: '/support', component: Support, children: [
{path: 'detailed', component: Detailed, name: 'detailed'}
]},
];
in my Support.vue i have a component ->
<div class="row">
<component :is = "selectedComponent"> </component>
</div>
and that component when selected displays certain content. Inside of this content i have -->
<div class="most-asked">
<ul>
<router-link :to ="{name: 'detailed'}" tag = 'li'> Test </router-link>
</ul>
When i press on that it changes the url in my browser to => "/support/detailed" but it doesnt redirect me to that page. Any ideas on why it happens and how to fix it?
P.S if i make routes seperate in routes.js like -> /detailed and /support then it redirects me perfectly fine, but once i make a child of support, it doesnt go there anymore
P.S.S and by some reason it tells me sometimes in my browser that its unable to load files like
(Failed to load resource: http://localhost:8080/support/src/vendors/css/grid.css Failed to the server responded with a status of 404 (Not Found)
and http://localhost:8080/support/src/vendors/css/ionicons.min.css Failed to load resource: the server responded with a status of 404 (Not Found)
I'm assuming if i include bootstrap and etc, its also not going to find it in those routes (why?), but if put all those routes seperatly without any children they work fine.
Upvotes: 0
Views: 678
Reputation:
As i understand the reason it doesnt display it because it requires another <router-view> </router-view>
apart from the root one. So forwarding question would be, is what kind of logic can you create that will switch you between the pages?
Upvotes: 1