Question

我已经搜索了Internet的许多部分（stackoverflow，vue文档，博客等），但没有找到所需的解决方案。因此，问题如下：

routes.js

 {
    path:'/',
    components:{
        allPageView:LytSPA
    },
    meta:{
        requiresAuth:true
    },
    children:[
        {
            path:'',
            name:'admin',
            components:{
                sectionView:AdminDashboard
            }
        },
        {
            name:'admin.users',
            path:'usuarios',
            components:{
                sectionView:Users
            },
            children:[
                {
                    name:'admin.users.create',
                    path:'crear', 
                    components:{
                        sectionView:UsersCreateEdit
                    }
                }
            ]
        }]}

因此，路径为：/，/ usuarios和/ usuarios / crear。

我的视图是：App.vue（具有命名视图），LytSPA.vue（具有命名视图），AdminDashboard.vue，Users.vue，UsersCreateEdit。因此，我有2个节点视图和3个叶视图。

App.vue

<template>
<router-view name="allPageView"></router-view></template>

LytSPA.vue

<template>
<div>
    <header>
        <header-view></header-view>
    </header>
    <transition name="slide-left-aside">
        <aside v-show="!collapsed">
            <aside-view @collapse="collapseAside"></aside-view>
        </aside>
    </transition>
    <transition name="slide-expand-button">
        <b-button @click="collapseAside(false)" id="btnExpand" v-show="collapsed">
            <font-awesome-icon icon="chevron-right"/>
        </b-button>
    </transition>
    <section id="sectionSPA" :class="{collapsed: collapsed}">
        <breadcrumb-view></breadcrumb-view>
        <router-view name="sectionView" key="$route.fullPath"></router-view>
    </section>
</div></template>

如您所见，在 LayoutSPA.vue 中，我将主视图放置在了 sectionView 容器中，因此：

路径为 / 时，加载仪表板视图。
路径为 / usuarios 时，加载“用户”视图。

问题就来了，当路径为 / usuarios / crear 时，它要么不加载UsersCreateEdit视图，要么保留最后一个（Users.vue）。但是，路由之所以起作用，是因为我对未知URL进行了重定向验证，因为url usuarios / crear 不会更改，因此可以正常工作，但不会加载视图。

我已经在AngularJS中使用UI-Router以这种方式工作，并且没有任何问题，因为它可以处理状态继承，但是我想知道在Vue中是否存在可以做到这一点的方法？ / p>

注意：我有一个替代解决方案，但我不喜欢它，因为我必须将 admin.users.create 路由作为 admin.users 并且它可以工作，但是我需要将其嵌套，因为我需要检索匹配的路由来构建面包屑，并且我不想解析构建它的路径。

Answer 1

在添加子路由<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); Class Customers_model extends CI_Model { public function __construct() { parent::__construct(); } function getCustomers($customer_id) { $this->db->select('*'); $this->db->from('customers'); $this->db->where(array('customer_id' => '1')) $query = $this->db->get(); return $query; } }时，这意味着在名称为admin.users.create的父路由中，组件必须包含自己的名称为admin.users的{{1}}。

您可以在<router-view> documentation

中找到该图片

sectionView

组件vue-router包含自己的/user/foo/profile /user/foo/posts +------------------+ +-----------------+ | User | | User | | +--------------+ | | +-------------+ | | | Profile | | +------------> | | Posts | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+，其中呈现组件User或<router-view>

因此，将Profile添加到组件Posts中，或将路线移至更高级别。

Answer 2

我遇到了同样的问题，并且在以下dev.to中的帖子中找到了解决方案。

如果要在单独的视图中显示列表组件和表单组件。您可以创建一个包含列表和表单的根组件：

User.vue（包装器）

<template>
    <router-view></router-view>
</template>

并且在route.js文件中必须有类似的内容

//...omitted for brevity
const routes = [
{
    path: "/users",
    component: User,
    children: [
      { path: "/", component: ListUsers, name: "user-list" },
      { path: "new", component: FormUsers, name: "user-form" }
    ]
  }
];
//...omitted for brevity

如果您不想为根组件创建新文件，则可以使用render方法：

{
    path: "/users",
    component: {
     render(c) { // render the wrapper component
        return c("router-view");
      }
    },
    children: [
      {
        path: "",
        component: ListUsers
      },
      {
        path: "new",
        component: FormUsers
      }
    ]
}

如何在Vue中使用嵌套嵌套路由重用命名视图？

2 个答案: