Question

我目前正在学习Vue JS，并通过制作一些应用程序对其进行练习。我遇到了一个无法解决的问题，需要您的帮助。

我有一个仪表板组件，用户可以在其中对文章和公告进行CRUD操作。模板的结构如下：

<template>
  <div class="dashboard">
    <div class="panel">
      <div class="panel-header">
        <div>
          <router-link to="/settings"
            tag="button"
            class="btn btn-action"><i class="icon website-icon"></i></router-link>
          <router-link to="/settings"
            tag="button"
            class="btn btn-action"><i class="icon messages-icon"></i></router-link>
        </div>
        <div class="panel-title">Admin Panel</div>
        <div>
          <router-link to="/settings"
            tag="button"
            class="btn btn-action"><i class="icon settings-icon"></i></router-link>
          <router-link to="/logout"
            tag="button"
            class="btn btn-action" style="font-size: 1rem"><i class="icon logout-icon"></i></router-link>
        </div>
      </div>
      <div class="panel-nav">
        <ul class="tab tab-block">
          <router-link to="/dashboard" exact
            tag="li"
            class="tab-item"
            active-class="active">Dashboard</router-link>
          <router-link to="/dashboard/articles"
            tag="li"
            class="tab-item"
            active-class="active">Articles</router-link>
          <router-link to="/dashboard/announcements"
            tag="li"
            class="tab-item"
            active-class="active">Announcements</router-link>
        </ul>
      </div>
      <div v-if="$route.path=='/dashboard/articles' || $route.path=='/dashboard/announcements'" class="panel-sub-nav">
        <button class="btn btn-unfavorite" style="width: 25%"><i class="icon unfavorite-icon"></i> Unfavorite All</button>
        <div style="width: 50%; text-align: center">0 / 5</div>
        <button v-if="$route.path=='/dashboard/articles'"  class="btn btn-add" style="width: 25%"><i class="icon add-icon"></i> Add Article</button>
        <button v-if="$route.path=='/dashboard/announcements'"  class="btn btn-add" style="width: 25%"><i class="icon add-icon"></i> Add Announcement</button>
      </div>
      <div class="panel-body">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

路由文件的结构如下：

import Dashboard from '../components/Dashboard'
import ArticleIndex from '../components/ArticleIndex'
import AnnIndex from '../components/AnnIndex'
import Settings from '../components/Settings'

export const routes = [
  { path: '/dashboard', component: Dashboard, children: [
    { path: 'articles', component: ArticleIndex },
    { path: 'announcements', component: AnnIndex },
  ] },
  { path: '/settings', component: Settings }
]

问题是我希望用户访问仪表板组件内的设置组件。但是他们应该通过/settings而不是/dashboard/settings访问设置组件。

由于我没有在仪表板路线内嵌套设置组件。设置组件未在仪表板组件内部打开。

该如何使“设置”组件在“仪表板”组件中打开但可以通过/ settings访问？

我认为这是一个非常容易解决的问题，并且肯定有人已经问过这个问题，但是不幸的是，我找不到答案。

任何帮助表示赞赏。谢谢。

Answer 1

好吧，您可以做的是将视图与组件分开。所以，我要做的是以下几点。创建

components / Settings.vue

和

views / DashboardView.vue
views / SettingsView.vue

然后将设置导入DashboardView和SettingsView

当然，您还要在路由器中导入{x}View组件。

将一个组件嵌套在另一个组件内而不将其嵌套在路由中

1 个答案: