Nested routes don't follow the defined pattern. VUEjs

Question

I'm facing a new issue with nested routes. I've 2 levels of nested routes, and they're not working correctly. Here are the routes object:

import Login from './components/auth/Login.vue';
import Dashboard from './components/dashboard/Dashboard.vue';
import Signup from './components/auth/Signup.vue';
import Home from './components/shared/Home.vue';


import ProductsHome from './components/dashboard/Products/ProductsHome.vue';
import ProductOverview from './components/dashboard/Products/ProductsOverview.vue';
import CreateProduct from './components/dashboard/Products/CreateProduct.vue';
import CreateCategory from './components/dashboard/Category/CreateCategory.vue';
import EditCategory from './components/dashboard/Category/EditCategory.vue';
import {store} from './store/store.js';

export const routes = [
    {path: '/', component: Home},
    { path: '/login', component: Login },
    { path: '/registrarse', component: Signup },
    { 
        path: '/dashboard',
        component: Dashboard,
        name: 'dashboard',
        beforeEnter: (to, from, next) => {
            if(to.name === 'dashboard') {
                if(store.state.User.credentials.tokenId === null) {
                    next('/');
                    //TODO, Hacerlo global y verificar que el dashboard y sus hijos no accedan.
                } else {
                    next();
                }
            }
            next();
        },
        children: [
            {
                path: 'productosHome',
                component: ProductsHome,
                children: [
                    {
                        path: '',
                        component: ProductOverview
                    },
                    {
                        path: 'crearProducto',
                        component: CreateProduct
                    },
                    {
                        path: 'crearCategoria',
                        component: CreateCategory
                    },
                    {
                        path: 'editarCategorias',
                        component: EditCategory
                    }
                ]
            }
        ]
    }
];

The thing is with the dashboard. When I enter the dashboard or any of its sub-routes (with its router-link component) they don't follow the proper URL path. For example: If a visit the 'productosHome' the URL it's just '/productosHome' and not '/dashboard/productosHome. This same problem applies for every productosHome's child route.

Now, let me show to you my templates:

Dashboard.vue

<template>
    <div>
        <div class="container is-fluid has-background-light">
            <h1 class="title has-text-centered pt-3">Dashboard</h1>
        </div>
        <section class="section py-3 has-background-light prueba section-dashboard">
            <div class="container is-fluid remove-padding dashboard">
                <aside class="nav-aside has-background-white">
                    <div>
                        <!--El anchor sera nuestro router-link-->
                        <!-- aside-link-active -->
                        <a href="#" class="aside-link">
                            <span class="icon">
                                <i class="fas fa-users"></i>
                            </span>
                            <span class="aside-link-text">Clientes</span>

                        </a>
                    </div>
                    <div>
                        <router-link    class="aside-link" 
                                        active-class="aside-link-active"
                                        to="productosHome">
                            <span class="icon">
                                <i class="fas fa-tags"></i>
                            </span>
                            <span class="aside-link-text">Productos</span>
                        </router-link>
                    </div>
                    <div>
                        <a href="#" class="aside-link">
                            <span class="icon">
                                <i class="fas fa-boxes"></i>
                            </span>
                            <span class="aside-link-text">
                                Pedidos
                            </span>
                        </a>
                    </div>
                </aside>
                <div class="main-content has-background-white">
                    <router-view></router-view>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
    export default {

    }
</script>

<style scoped>
    .aside-link.aside-link-active:hover {
        color: white;
    }
</style>

ProductsHome.vue

<template>
    <div>
        <div class="tabs is-medium pt-2 mb-0">
            <ul>
                <!-- is-active -->
                <router-link    to="crearProducto" 
                                active-class="is-active"
                                tag="li">
                    <a>Crear</a>
                </router-link>
                <li><a>Editar</a></li>
                <li><a>Buscar</a></li>
                <router-link    to="crearCategoria" 
                                active-class="is-active"
                                tag="li">
                    <a>| Crear categoría</a>
                </router-link>
                <router-link    to="editarCategorias" 
                                active-class="is-active"
                                tag="li">
                    <a>Editar categoria</a>
                </router-link>
            </ul>
        </div>
        <div class="main-content__content block p-2">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default {

    }
</script>
<style scoped>

</style>

Note that Products Home also have children.

Also, I'm debugging routes with the famous Vue plugin and see what says:

'/' is marked has active, Is that correct?

I'm confused :D

Mir Ayman Ali Mir Ayman Ali · Accepted Answer · 2020-10-20T05:21:13

The routes file is correct. The issue is with the router link on both files. there are 2 ways you can define router-link>to.

Absolute / Relative Path.

Absolute Path(From any file)

  <router-link to="/dashboard/productosHome/">Products Home</router-link>

Relative Path(From dashboard page)

  <router-link to="productosHome">Products Home</router-link>

Route object. (From any file)

  <router-link :to="{ path: `/dashboard/productosHome/`}">Products Home</router-link>

No 2 gives you a bit more control. you can now name the route and use them. Like you did for dashboard main route. name: 'dashboard',. Now you can name the subroute.

{
  path: 'crearProducto',
  component: CreateProduct,
  name: 'crearProducto'
},

router link will be

  <router-link :to="{ name: 'crearProducto'}">Crear Producto</router-link>

Check Documentation for more https://router.vuejs.org/api/#to

Nested routes don't follow the defined pattern. VUEjs

2 Answers