主页 / 问题 / 1071815
Accepted
MoloF
Asked:2020-01-20 01:28:10 +0000 UTC2020-01-20 01:28:10 +0000 UTC

vue 路由器 | 项目组织，组件内的动态路径

  • 772

我在 Vue 有一个项目。

应用结构如下

|   App.vue
|   main.js
|   router.js
|               
+---components
|   |   Notifications.vue 
|   |           
|   +---hud
|   |       PlayerHud.vue
|   |       Showpass.vue
|               
+---store
|   |   index.js
|   |   
|   \---modules
|       |       
|       +---hud
|       |       index.js
|       |       playerhud.js
|       |       showpass.js
|       |       
|       +---notifications
|               
\---views
    |   Hud.vue

Hud.vue 文件本身

<template>
    <div id="hud">
        <player-hud></player-hud>
        <show-pass></show-pass>
        <notifications id="notifications"></notifications>
    </div>
</template>

<script>
    import PlayerHud from "../components/hud/PlayerHud";
    import Showpass from "../components/hud/Showpass";
    import Notifications from "../components/Notifications";

    export default {
        components: {
            PlayerHud,
            Showpass,
            Notifications
        }
    };
</script>

路线：

import Vue from 'vue';
import Router from 'vue-router';

import Hud from './views/Hud';

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/hud',
            component: Hud
        }
    ]
});

底线是有一个 PlayerHud.vue 组件，它应该包含路由，有一个 ShowPass.vue 组件，它也有路由。

有必要确保路由不会相互干扰。

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/hud',
            component: Hud,
            children: [
                {
                    path: '/playerhud',
                    component: Stats,
                    children: [
                        {
                            path: 'settings',
                            component: Settings,
                        },
                        {
                            path: 'other',
                            component: Other,
                        }
                    ]
                },
                {
                    path: '/show-pass',
                    component: ShowPass,
                    children: [
                        {
                            path: 'first',
                            component: First,
                        },
                        {
                            path: 'second',
                            component: Second,
                        }
                    ]
                }
            ]
        }
    ]
});

如果我这样做，那么当我沿着 /playerhud 路线前进时，我将关闭 /show-pass 所有内部选项卡，同时组织路线，以便在过渡期间没有任何重叠或关闭，但可以正常工作。

应该是什么结构？可能还有其他我还没有看到的选项。

vue.js

1 个回答

  1. Best Answer

    答案的关键在于name组件的属性router-view。 文档

    诚然，对于 url 的每个变体，您都必须对要显示的组件进行硬编码。我的意思是：如果用户在 Window-1 中转到 Sub-Window-1，然后，在 Window-2 中移动到 Sub-Window-2 时，Window-1 将显示写入的子窗口设置路由器，而不是用户之前选择的路由器。我无法解决这个不便。

    const Base = Vue.component('vbase', {
  template: `<div>
    <div>Base</div>
    <router-link to="/home/house">/home/house</router-link> ||
    <router-link to="/home/shed">/home/shed</router-link>
    <router-view></router-view>
    <router-view name="second"></router-view>
  </div>`
});

const Child1 = Vue.component('child-one', {
  template: `<div class="child">
    <b>Child_1 </b>
    <router-view></router-view>
    <router-link to="/home/house/kitchen">/home/house/kitchen</router-link> |||
    <router-link to="/home/house/bedroom">/home/house/bedroom</router-link>
  </div>`
});

const Child2 = Vue.component('child', {
  template: `<div class="child">
    Child_2
    <router-view name="second"></router-view>
    <router-link to="/home/shed/cellar">/home/shed/cellar</router-link> |||
    <router-link to="/home/shed/loft">/home/shed/loft</router-link> 
  </div>`
});

const GrandChild1 = Vue.component('grand-child', {
  template: `<div>
    GrandChild1
  </div>`
});
const GrandChild2 = Vue.component('grand-child', {
  template: `<div>
    GrandChild2
  </div>`
});
const GrandChild3 = Vue.component('grand-child', {
  template: `<div>
    GrandChild3
  </div>`
});
const GrandChild4 = Vue.component('grand-child', {
  template: `<div>
    GrandChild4
  </div>`
});

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Base,
      children: [
        {
          path: 'house/',
          components: { default: Child1, second: Child2 },
          children: [
            {
              path: 'kitchen',
              components: { default: GrandChild1, second: GrandChild2 }
            },
             {
              path: 'bedroom',
              components: { default: GrandChild3, second: GrandChild2 }
            }
          ]
        },

        {
          path: 'shed/',
          components: { default: Child1, second: Child2 },
          children: [
            {
              path: 'cellar',
              components: { default: GrandChild1, second: GrandChild2 }
            },
             {
              path: 'loft',
              components: { default: GrandChild1, second: GrandChild4 }
            }
          ]
        }
      ]
    },
    { path: '/', component: Base }
  ]
});

const app = new Vue({
  router,
  el: '#app',
  template: `<div>
    <router-view></router-view>
  </div>`
});
    .child{
    border: 1px solid;
    margin-bottom: 20px;
}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.1/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <div id="app"></div>

    我的观点是，对于命名视图，比第 2 级更深，最好不要挖掘。3级及以下，最好使用动态组件。

    • 1

相关问题