vue.js - 子路由组件不在 vue js 中呈现

标签 vue.js routing components vue-component

<分区>

我定义了这样的路线

{
        path:'/admins',
        name:'admin.admins',
        component: Admin,
        children: [
            {
              path:'add',
              name:'admin.add',
              component:addAdmin
            },
            {
              path:'edit/:id',
              name:'admin.edit',
              component:editAdmin
            }
        ]
    }

如果我声明 child 路线在 child 之外，例如

{
        path:'/admins',
        name:'admin.admins',
        component: Admin
    },
    {
      path:'/add',
      name:'admin.add',
      component:addAdmin
    },
    {
      path:'/edit/:id',
      name:'admin.edit',
      component:editAdmin
    }

一切正常，但在访问子路由时，浏览器中的 url 发生变化，但组件未加载。访问父子路径时只显示父组件。我调用这样的路线

<router-link :to="{ name:'admin.add' }"><i class="fa fa-plus"></i> Add Admin</router-link>

最佳答案

当使用嵌套路由时，子组件依赖于父组件。要在访问子路径时呈现子组件，您必须调用

<router-view></router-view>也在父组件内部。

如果您的道路是独立的，请不要在孩提时代就走。如果您注册子路由，请继续放置 <router-view></router-view>在父组件上(在任何嵌套级别上)。

如果您使用 / 开始嵌套路由它将被视为根路径。 Read more

关于vue.js - 子路由组件不在 vue js 中呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50247097/

上一篇：http - Vue 代理设置不起作用

下一篇：c# - dotnet 核心 : discontinued? 中的 Vue.js 模板

相关文章：

image - Img 源将 prop 传递给子组件 Vue Js

javascript - 如何使用 Vue.js 切换按钮？

javascript - Ember : "import Route from ' @ember/routing/route';"throws error in Console

ruby-on-rails - 设计自定义路由和登录页面

ruby-on-rails - 实现单表继承后的 Broken Rails 路由

Android 对话框编号选择器

javascript - VueJS 中的计算属性

javascript - 如何以编程方式访问 vuetify 元素的属性？

javascript - NodeJS 不会导入非 NodeJS 文件

javascript - ReactJs 中定义组件的两种方式之间的区别