vue.js - 嵌套路由不遵循定义的模式。VUEjs

问题描述

我面临嵌套路由的新问题。我有 2 级嵌套路由，但它们无法正常工作。以下是路线对象：

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
                    }
                ]
            }
        ]
    }
];

问题在于仪表板。当我进入仪表板或其任何子路由（及其路由器链接组件）时，它们没有遵循正确的 URL 路径。例如：如果访问 'productosHome' 的 URL，它只是 '/productosHome' 而不是 '/dashboard/productosHome。同样的问题适用于每个 productosHome 的子路由。

现在，让我向您展示我的模板：

仪表板.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>

产品首页.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>

请注意，Products Home 也有子级。

另外，我正在用著名的 Vue 插件调试路由，看看说了什么：

'/' 标记为 has active，对吗？

我很困惑：D

标签： vue.jsvuejs2vue-router

vue.js - 嵌套路由不遵循定义的模式。VUEjs

问题描述

解决方案

推荐阅读