多个链接将参数传递给同一路由

Question

我有一个“文档”页面，其中包含 3 个子菜单。

我想要做的是，无论单击哪个子菜单，我都希望它转到一个主文档 Vue 组件，然后将一个变量传递给它，以便子组件也加载到主组件中。

---

这是我目前所拥有的：

Nav.vue

<template>
      <div>
          <nav class="navbar navbar-expand-lg">
            <ul class="navbar-nav ml-auto h-100 d-flex align-items-center" style="margin-right: 5rem">
                <div class="nav-item dropdown" @mouseover="openDocDropDown" @mouseleave="closeDocDropDown">
                    <div ref="docDropdown" class="d-flex align-items-center" role="button" data-toggle="dropdown" style="height: 42px; cursor: default">
                        <i class="far fa-file-alt" style="font-size: 1.9rem" />&nbsp;
                        Documentation
                        <i class="ml-2" :class="[docCollapsed ? 'fa-caret-down' : 'fa-caret-up', 'fas']" />
                    </div>
                    <div v-if="!docCollapsed" class="dropdown-menu subMenus" aria-labelledby="navbarDropdown">
                        <router-link to="/documentation" tag="div" class="nav-item d-flex align-items-center p-3" @click.native="docMenuClicked('admin')">
                            <i class="far fa-file-pdf" style="font-size: 1.9rem" />&nbsp;
                            <span class="pt-1 pl-1">Administrator documentation</span>
                        </router-link>
                        <router-link to="/documentation" tag="div" class="nav-item d-flex align-items-center p-3" @click.native="docMenuClicked('reseller_channel')">
                            <i class="far fa-file-pdf" style="font-size: 1.9rem" />&nbsp;
                            <span class="pt-1 pl-1">Reseller/Channel documentation</span>
                        </router-link>
                        <router-link to="/documentation" tag="div" class="nav-item d-flex align-items-center p-3" @click.native="docMenuClicked('cust')">
                            <i class="far fa-file-pdf" style="font-size: 1.9rem" />&nbsp;
                            <span class="pt-1 pl-1">Customer documentation</span>
                        </router-link>
                    </div>
                </div>
                <router-link to="/contactus" tag="li" :class="[currentPage.includes('/conactus/') ? 'router-link-exact-active router-link-active' : '', 'nav-item mainMenuLink d-flex align-items-center']">
                  <i class="d-none d-xl-inline icon-nav_contact_us iconSize" />&nbsp;Contact us
                </router-link>
            </ul>
        </nav>
    </div>
</template>

<script>    
    export default {
        name: "TopNav",

        props: [ 'hasErrored' ],

        data() {
            return {
                unCollapsed: true,
                docCollapsed: true,
                docMenuItemClicked: ''
            }
        },

        computed: {
            ...mapGetters({
                user: 'user'
            }),
          
            currentPage() {
                return this.$route.path;
            }
        },

        methods: {
            openUnDropDown() {
                this.$refs.unDropdown.visible = true;
                this.unCollapsed = false;
            },

            closeUnDropDown() {
                this.$refs.unDropdown.visible = false;
                this.unCollapsed = true;
            },

            openDocDropDown() {
                this.$refs.docDropdown.visible = true;
                this.docCollapsed = false;
            },

            closeDocDropDown() {
                this.$refs.docDropdown.visible = false;
                this.docCollapsed = true;
            },

            docMenuClicked(data) {
                this.docMenuItemClicked = data;

                setTimeout(() => {
                    VueEvent.$emit('document-menu-clicked', { menuClicked:  this.docMenuItemClicked });
                    this.docCollapsed = true;
                }, 1)
            }
        }
    }
</script>

DocumentationMain.vue

<template>
    <div>
        Main Document Page
        {{ menuClicked }}
        <ResellChanDocs v-if="menuClicked === 'reseller_channel'" />
        <CustDocs v-else-if="menuClicked === 'cust'" />
        <AdminDocs v-else />
    </div>
</template>

<script>
import ResellChanDocs from './DocumentationResellerChannel';
import CustDocs from './DocumentationCustomer';
import AdminDocs from './DocumentationAdministrator';

    export default {
        name: 'MainDocumentation',

        components: {
            ResellChanDocs,
            CustDocs,
            AdminDocs
        },

         data() {
            return {
                menuClicked: 'admin'
            }
        },

        beforeMount() {
            VueEvent.$on('document-menu-clicked', (data) => {
                this.menuClicked = data.menuClicked;
            });
        }

    }
</script>

routes.js

import Home from './components/Home.vue';
import ContactUs from './components/ContactUs';
import Documentation from './components/DocumentationMain';

export const routes = [
    { path: '', component: Home },
    { path: '/contactus', component: ContactUs },
    { path: '/documentation', component: Documentation, props: true },
    { path: '*', redirect: '/' }
];

给予

---

问题

1. 有更简单的方法吗？
2. 当我单击菜单时，我的“DocumenationMain”似乎没有注册VueEvent.$emit
3. 当我第二次单击链接时，会呈现正确的组件
4. 当我点击一个链接时，我的所有其他菜单都会突出显示为蓝色

我觉得我做错了

Answer 1

只需使用Dynamic Route Matching

export const routes = [
    { path: '', component: Home },
    { path: '/contactus', component: ContactUs },
    { path: '/documentation/:doctype', component: Documentation, props: true },
    { path: '*', redirect: '/' }
];

nav.vue

<router-link to="/documentation/reseller" />
<router-link to="/documentation/cust" />
<router-link to="/documentation/admin" />

Documentation.vue

props: {
  doctype: {
    type: String,
    default: 'admin'
  }
}

路由器现在应该将 :doctype 值（来自 URL）传递给文档组件 doctype 属性 - 使用它来决定在内部激活哪个子组件...