Fatal编程技术网
  • javascript/
  • Javascript 为什么嵌套子组件不呈现视图？

Javascript 为什么嵌套子组件不呈现视图？

javascript vue.js vuejs2

Javascript 为什么嵌套子组件不呈现视图？,javascript,vue.js,vuejs2,vue-component,vue-router,Javascript,Vue.js,Vuejs2,Vue Component,Vue Router,以下是我的设置： Vue 2.5.16 维克斯 Vue路由器 我设置了一个简单的路由器视图，在父组件中查找子组件，url结构为 /文件夹/父uuid/子uuid 我在下面为家长提供了一个组件： <template lang="html"> <div> <!-- Articles --> <div class="flex-none w-100 mv3 gray"><p>Bookmarks({{ subFolders.c

以下是我的设置：

Vue 2.5.16 维克斯 Vue路由器

我设置了一个简单的路由器视图，在父组件中查找子组件，url结构为

/文件夹/父uuid/子uuid

我在下面为家长提供了一个组件：

<template lang="html">
  <div>
    <!-- Articles -->
    <div class="flex-none w-100 mv3 gray"><p>Bookmarks({{ subFolders.contentDetails.articles.length }})</p></div>
    <div class="flex flex-row flex-wrap justify-start items-start">
      <div v-for="article in subFolders.contentDetails.articles" class="pointer article-item relative mb4">
        <a v-on:click.stop.prevent="checkFolder(article.uuid)" :class="[{highlight:selectedItems.includes(article.uuid)}, 'absolute w-100 h-100 left-0 top-0 highlight-area z-3']" href="#"><div class="absolute top-2" style="width: 18px;height: 18px;right: 3.05rem;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path v-if="selectedItems.includes(article.uuid)" fill="#ea792e" d="M3 17.2V21h3.8l11-11.1L14 6.1 3 17.2zM20.7 7c.4-.4.4-1 0-1.4l-2.3-2.3c-.4-.4-1-.4-1.4 0l-1.8 1.8L19 8.9c-.1 0 1.7-1.9 1.7-1.9z"/><path v-else fill="#ffffff" d="M3 17.2V21h3.8l11-11.1L14 6.1 3 17.2zM20.7 7c.4-.4.4-1 0-1.4l-2.3-2.3c-.4-.4-1-.4-1.4 0l-1.8 1.8L19 8.9c-.1 0 1.7-1.9 1.7-1.9z"/></svg></div></a>
        <a :class="[{active:selectedItems.includes(article.uuid)}, 'link']" v-bind:href="article.contentUrl">
          <div :class="[{active:selectedItems.includes(article.uuid)}, 'contentImage br3 overflow-hidden']">
            <img class="w-100" :src=article.titleImage data-flickity-lazyload="article.titleImage">
          </div>
          <div v-if="article.contentType == 'Behaviour'" class="black">
            <h4 class="f3">{{article.contentTitle}}</h4>
          </div>
          <div v-else class="black">
              <h4 class="f3">{{article.contentTitle}}</h4>
          </div>
          <div v-if="article.contentType == 'Behaviour'">
          </div>
          <div v-else class="content no-margin">
            <p class="f3">{{article.savedDate | moment("D MMM YYYY")}}</p>
          </div>
        </a>
      </div>
    </div>
    <!-- end v-if -->
    <div class="flex-none w-100 mt3 gray folders"><div class="ph5"><p>Subfolders({{ subFolders.subFolders.length }})</p></div></div>
    <div class="flex flex-row flex-wrap justify-start items-start">
      <div class="folder-item folder z-0 pointer">
        <div class="relative db h-100 bg-light-gray folder-new br3 mb4">       
          <div v-on:click="addFolder($event)" class="top aspect-ratio--object">
            <div class="dt w-100 h-100 no-margin showText pv6">
              <div class="dtc v-mid tc ">
                <svg class="dib v-mid icon-sprite" viewBox="0 0 38.89 38.89" width="40" height="40">
                 <circle cx="19.45" cy="19.45" r="19.45" fill="#ea792e"/><path stroke="#ffffff" stroke-width="3" d="M19.45 12.26v14.37M12.26 19.45h14.37" />
                </svg>
                <p>Create new folder</p>
              </div>
            </div>
          </div>
          <div class="bottom aspect-ratio--object">
            <div class="dt w-100 h-100 ">
              <div class="dtc v-mid tc no-margin showText pv6">
                <p>Explore the library and add to this folder</p>
                <form id="submit-folder" @submit.prevent="sendForm" class="mv3">
                  <input type="text" name="folderName" value="" placeholder="Add folder name in here..." v-model="folderName">
                  <input class="db center input-reset bg-orange b--none br2 white mv3 f3 pv3 ph4" style="font-family:'Open Sans',Helvetica Neue,sans-serif;" type="submit" name="Submit">
                </form>
              </div>
            </div>
          </div>
          <div style="visibility: hidden;" class="image-blocks br3 overflow-hidden relative flex flex-wrap">
            <div><img src="http://***/static-assets/images/EMPTY-FOLDER-GREY-1.jpg" alt=""></div>
            <div><img src="http://***/static-assets/images/EMPTY-FOLDER-GREY-2.jpg" alt=""></div>
            <div><img src="http://***/static-assets/images/EMPTY-FOLDER-GREY-3.jpg" alt=""></div>
          </div>
        </div>
      </div>
      <div v-for="folder in subFolders['subFolders']" class="pointer folder folder-item relative">
        <a v-on:click.stop.prevent="checkFolder(folder.uuid)" :class="[{highlight:selectedItems.includes(folder.uuid)}, 'absolute w-100 h-100 left-0 top-0 highlight-area z-3']" href="#"><div class="absolute top-2" style="width: 18px;height: 18px;right: 3.05rem;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path v-if="selectedItems.includes(folder.uuid)" fill="#ea792e" d="M3 17.2V21h3.8l11-11.1L14 6.1 3 17.2zM20.7 7c.4-.4.4-1 0-1.4l-2.3-2.3c-.4-.4-1-.4-1.4 0l-1.8 1.8L19 8.9c-.1 0 1.7-1.9 1.7-1.9z"/><path v-else fill="#ffffff" d="M3 17.2V21h3.8l11-11.1L14 6.1 3 17.2zM20.7 7c.4-.4.4-1 0-1.4l-2.3-2.3c-.4-.4-1-.4-1.4 0l-1.8 1.8L19 8.9c-.1 0 1.7-1.9 1.7-1.9z"/></svg></div></a>
        <router-link :class="[{active:selectedItems.includes(folder.uuid)}, 'z-0 db relative link']" :to="`/folders/${folderUUID}/${folder.uuid}`">
          <div class="image-blocks br3 overflow-hidden relative">

              <div class="" v-for="image in folder.topThreeThumbnails">
                <img class="" :src=image>
              </div>

          </div>
        </router-link>
        <div :class="[{active:selectedItems.includes(folder.uuid)}, 'content']">
          <router-link :to="`/folders/${folder.uuid}`" :class="[{active:selectedItems.includes(folder.uuid)}, 'link black']">
            <h3>{{folder.folderName}}</h3>
            <p>{{folder.subFolderCount}} subfolders, {{folder.totalElements}} elements</p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'subfolderListParent',
  data() {
    return {
      selected: [],
      selectedArticles: [],
      folder: '',
      folderName: '',
      folderUUID: this.$route.params.uuid
    }
  },
  mounted: function () {
    this.$store.dispatch('LOAD_SUBFOLDERS_LIST',this.$route.params.uuid)
    this.$store.dispatch('LOAD_FOLDERS_LIST')
    this.$store.state.selectedItems = [];
    this.$route.meta.title = this.$store.getters.openSubfolderTitle;
  },
  props: ['uuid','subfolderName'],
  computed: {
   ...mapState([
      'subFolders',
      'allFolders',
      'allArticles',
      'selectedItems',
      'selectedFolder'
    ]),
   ...mapGetters([
      'openSubfolderTitle',
    ])
  },
  methods: {
    checkFolder: function(item){
      this.$store.dispatch('SELECT_FOLDER',item)
    },
    addFolder: function(event){
      const target = event.currentTarget.parentNode,
            top    = target.children[0],
            bottom = target.children[1];
      if(bottom.classList.contains('active')){
        top.classList.remove('hidden');
        bottom.classList.remove('active');
      } else {
        top.classList.add('hidden');
        bottom.classList.add('active');
      }      
    },
    sendForm: function(event){
      this.$store.dispatch('CREATE_FOLDER',{'folder':this.folderName,'uuid':this.$route.params.uuid})
      this.folderName = '';
    },
    setTitle: function(){
      this.$route.meta.title = this.$store.getters.openSubfolderTitle;
    }
  },
  watch: {
    '$route': function(from, to) {
      this.$route.meta.title = this.$store.getters.openSubfolderTitle;
    }
  }
}
</script>


书签（{subFolders.contentDetails.articles.length}}）

子文件夹（{Subfolders.Subfolders.length}）

创建新文件夹

浏览库并添加到此文件夹

{{folder.folderName}
{{folder.subFolderCount}}子文件夹，{{folder.totalElements}}元素

从“vuex”导入{mapState，mapGetters}
导出默认值{
名称：“子文件夹列表父项”，
数据（）{
返回{
选定：[]，
选定的项目：[]，
文件夹：“”，
folderName:“”，
folderUUID:此.$route.params.uuid
}
},
挂载：函数（）{
this.$store.dispatch（'LOAD_SUBFOLDERS_LIST'，this.$route.params.uuid）
此.$store.dispatch（'LOAD\u FOLDERS\u LIST'）
这是。$store.state.selectedItems=[]；
this.$route.meta.title=this.$store.getters.openSubfolderTitle；
},
道具：['uuid'，'subfolderName']，
计算：{
…地图状态([
“子文件夹”，
“所有文件夹”，
“所有物品”，
“selectedItems”，
“selectedFolder”
]),
…地图绘制者([
“openSubfolderTitle”，
])
},
方法：{
检查文件夹：功能（项目）{
此.$store.dispatch（'SELECT_FOLDER'，item）
},
addFolder:函数（事件）{
const target=event.currentTarget.parentNode，
top=target.children[0]，
底部=目标。子项[1]；
if（bottom.classList.contains（'active'））{
top.classList.remove（'hidden'）；
bottom.classList.remove（'active'）；
}否则{
top.classList.add（'hidden'）；
bottom.classList.add（'active'）；
}      
},
sendForm：函数（事件）{
this.$store.dispatch（'CREATE_FOLDER'，{'FOLDER'：this.folderName，'uuid'：this.$route.params.uuid}）
this.folderName=''；
},
setTitle:function（）{
this.$route.meta.title=this.$store.getters.openSubfolderTitle；
}
},
观察：{
“$route”：函数（从、到）{
this.$route.meta.title=this.$store.getters.openSubfolderTitle；
}
}
}
这是一个非常直接的模板，它在vuex等中查找一些数据并将其放入模板中。当我试图从嵌套视图加载子组件时，就会出现问题

路由器代码如下：

{
    path: '/folders/:uuid', 
    component: Folder,
    name: 'subfolderListParent', 
    props: true,
    meta: {
      bcDynamic: true,
      bcGetter: 'openSubfolderTitle', // <breadcrumb> will use this getter to get the user from vuex
      bcLinkText: state => state, // once we have the user, we use this function to format the LinkText dnynamically,
      bcLoadingText: 'Loading title...' // This will be shown while Data is loading
    },
    children: [
      {
        path: '/:parentUUID',
        props: true,
        components: {
          child: FolderChild
        },
        meta: {
          bcDynamic: true,
          bcGetter: 'openSubfolderTitle', // <breadcrumb> will use this getter to get the user from vuex
          bcLinkText: state => state, // once we have the user, we use this function to format the LinkText dnynamically,
          bcLoadingText: 'Loading title...' // This will be shown while Data is loading
        },
      }
    ]
  },

<template>
<div id="app" style="clear:both;min-height:100vh;" class="flex-l flex-row flex-wrap items-stretch">
  <transition name="slide-fade">
    <div class="fixed right-2 br2 ph4 pv3 bg-orange white z-3" v-on:click="$store.state.noteText.note = !$store.state.noteText.note" v-bind:key="$store.state.noteText.note" v-if="$store.state.noteText.note === true">
      <p class="white ma0 pa0 dib v-mid">{{$store.state.noteText.note}}</p>
    </div>
  </transition>
  <MainNav/>
    <div v-if="$route.path === '/from-canvas8'"></div>
    <div class="flex-none" v-else>
      <FolderActions/>
    </div>
  <div class="dib w-75-l w-100 v-top ph5 appWrapper">
    <router-view></router-view>   
  </div>
</div>
</template>

<script>
import MainNav from './components/MainNav.vue'
import FolderList from './components/FolderList.vue'
import FolderActions from './components/FolderActions.vue'
import ScrapbookHome from './components/ScrapbookHome.vue'
import { mapState } from 'vuex'
export default {
  components: {
    MainNav,
    FolderList,
    FolderActions,
    ScrapbookHome
  },
  name: 'scrapbook',
  data () {
    return {
      welcomeMessage: 'Story Navigation'
    }
  },
  methods: {

    updateScroll: function(){
      const nav = document.querySelector('.scrapbook-actions');
      const navTop = nav.offsetTop;

      function stickyNavigation() {

        if (window.scrollY >= navTop) {
          // nav offsetHeight = height of nav
          nav.classList.add('fixed');
        } else {
          nav.classList.remove('fixed');
        }
      }

      window.addEventListener('scroll', stickyNavigation); 
    },

  },
  mounted: function () {
    // this.$store.dispatch('LOAD_FOLDERS_LIST')
    //this.setNavHeight()
    this.$store.dispatch('GET_USER')
  },
  watch: {
    '$route': function(from, to) {
      //this.updateScroll()
      //this.setNavHeight()
    }
  }
} 
</script>

{
路径：'/folders/：uuid'，
组件：文件夹，
名称：“子文件夹列表父项”，
道具：没错，
元：{
是的，
bGetter:'openSubfolderTitle'，//将使用此getter从vuex获取用户
bcLinkText:state=>state，//一旦有了用户，我们就使用这个函数动态格式化LinkText数据，
bcLoadingText:“正在加载标题…”//在加载数据时将显示此内容
},
儿童：[
{
路径：'/：parentUUID'，
道具：没错，
组成部分：{
孩子：FolderChild
},
元：{
是的，
bGetter:'openSubfolderTitle'，//将使用此getter从vuex获取用户
bcLinkText:state=>state，//一旦有了用户，我们就使用这个函数动态格式化LinkText数据，
bcLoadingText:“正在加载标题…”//在加载数据时将显示此内容
},
}
]
},
所有渲染的应用程序代码如下所示：

{
    path: '/folders/:uuid', 
    component: Folder,
    name: 'subfolderListParent', 
    props: true,
    meta: {
      bcDynamic: true,
      bcGetter: 'openSubfolderTitle', // <breadcrumb> will use this getter to get the user from vuex
      bcLinkText: state => state, // once we have the user, we use this function to format the LinkText dnynamically,
      bcLoadingText: 'Loading title...' // This will be shown while Data is loading
    },
    children: [
      {
        path: '/:parentUUID',
        props: true,
        components: {
          child: FolderChild
        },
        meta: {
          bcDynamic: true,
          bcGetter: 'openSubfolderTitle', // <breadcrumb> will use this getter to get the user from vuex
          bcLinkText: state => state, // once we have the user, we use this function to format the LinkText dnynamically,
          bcLoadingText: 'Loading title...' // This will be shown while Data is loading
        },
      }
    ]
  },

<template>
<div id="app" style="clear:both;min-height:100vh;" class="flex-l flex-row flex-wrap items-stretch">
  <transition name="slide-fade">
    <div class="fixed right-2 br2 ph4 pv3 bg-orange white z-3" v-on:click="$store.state.noteText.note = !$store.state.noteText.note" v-bind:key="$store.state.noteText.note" v-if="$store.state.noteText.note === true">
      <p class="white ma0 pa0 dib v-mid">{{$store.state.noteText.note}}</p>
    </div>
  </transition>
  <MainNav/>
    <div v-if="$route.path === '/from-canvas8'"></div>
    <div class="flex-none" v-else>
      <FolderActions/>
    </div>
  <div class="dib w-75-l w-100 v-top ph5 appWrapper">
    <router-view></router-view>   
  </div>
</div>
</template>

<script>
import MainNav from './components/MainNav.vue'
import FolderList from './components/FolderList.vue'
import FolderActions from './components/FolderActions.vue'
import ScrapbookHome from './components/ScrapbookHome.vue'
import { mapState } from 'vuex'
export default {
  components: {
    MainNav,
    FolderList,
    FolderActions,
    ScrapbookHome
  },
  name: 'scrapbook',
  data () {
    return {
      welcomeMessage: 'Story Navigation'
    }
  },
  methods: {

    updateScroll: function(){
      const nav = document.querySelector('.scrapbook-actions');
      const navTop = nav.offsetTop;

      function stickyNavigation() {

        if (window.scrollY >= navTop) {
          // nav offsetHeight = height of nav
          nav.classList.add('fixed');
        } else {
          nav.classList.remove('fixed');
        }
      }

      window.addEventListener('scroll', stickyNavigation); 
    },

  },
  mounted: function () {
    // this.$store.dispatch('LOAD_FOLDERS_LIST')
    //this.setNavHeight()
    this.$store.dispatch('GET_USER')
  },
  watch: {
    '$route': function(from, to) {
      //this.updateScroll()
      //this.setNavHeight()
    }
  }
} 
</script>



{{$store.state.noteText.note}

从“/components/MainNav.vue”导入MainNav
从“./components/FolderList.vue”导入FolderList
从“./components/FolderActions.vue”导入FolderActions
从“./components/ScrapbookHome.vue”导入ScrapbookHome
从“vuex”导入{mapState}
导出默认值{
组成部分：{
主导航，
文件夹列表，
折叠动作，
剪贴簿主页
},
名称：'剪贴簿'，
数据（）{
返回{
欢迎留言：“故事导航”
}
},
方法：{
updateScroll:function（）{
const nav=document.querySelector（'.scrapbook actions'）；
const navTop=nav.offsetTop；
函数stickyNavigation（）{
如果（window.scrollY>=navTop）{
//导航离视=导航高度
nav.classList.add（'fixed'）；
}否则{
nav.classList.remove（'fixed'）；
}
}
window.addEventListener（'scroll'，stickyNavigation）；
},
},
挂载：函数（）{
//此.$store.dispatch（'LOAD\u FOLDERS\u LIST'）
//this.setNavHeight（）
此.$store.dispatch（'GET_USER'））
},
观察：{
“$route”：函数（从、到）{
//this.updateScroll（）
//this.setNavHeight（）
}
}
}
由于某些原因，
将不显示此子组件

有人能帮我解释一下为什么这不起作用吗？

嵌套路由时，每个路由部分都将装入父路由的组件中。在您的情况下，
文件夹
将装入
应用程序
，而
文件夹
将装入
文件夹
。据我所知，嵌套路由的情况总是如此，e 
export default [
  {
    path: "/folders/:uuid",
    component: DummyView,
    children: [
      {
        path: "",
        component: Folder
      },
      {
        path: ":parentUUID",
        component: FolderChild
      }
    ]
  }
];