vue-router中children怎么使用

這篇文章主要講解了“vue-router中children怎么使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue-router中children怎么使用”吧！

關(guān)于children的使用

children的使用場景

比如頁面左側(cè)顯示菜單，右側(cè)顯示不同菜單下的內(nèi)容，類似如下element網(wǎng)站，那么右側(cè)部分的內(nèi)容就是當(dāng)前頁面的children

存在如下場景，點(diǎn)擊導(dǎo)航一跳轉(zhuǎn)至頁面1，導(dǎo)航二跳轉(zhuǎn)頁面2，且頁面1中存在子頁面

路由js如下：

const routes = [{
    path: '/',
    name: 'Home',
    component: Home,
    children: [{
      path: '/page1',
      name: 'page1',
      component: function () {
        return import( /* webpackChunkName: "about" */ '../views/Page1.vue')
      },
      children: [{
        path: '/page1Son',
        name: 'page1Son',
        component: function () {
          return import( /* webpackChunkName: "about" */ '../views/Page1Son.vue')
        }
      }],
    },
    {
      path: '/page2',
      name: 'page2',
      component: function () {
        return import( /* webpackChunkName: "about" */ '../views/Page2.vue')
      }
    }]
  }
]

首頁代碼如下： 

<template>
  <div class="home">
    <el-menu default-active="2" class="el-menu-vertical-demo">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
           <span slot="title"><router-link to="/page1">導(dǎo)航一</router-link></span>
        </template>
      </el-submenu>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title"><router-link to="/page2">導(dǎo)航二</router-link></span>
      </el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

 點(diǎn)擊導(dǎo)航欄一顯示頁面1下的內(nèi)容

點(diǎn)擊頁面1中的顯示按鈕，顯示頁面1的子頁面page1Son

點(diǎn)擊導(dǎo)航欄二顯示頁面2

router配置中children配置不起作用

剛開始學(xué)習(xí)前端技術(shù)，再配置路由的時(shí)候，發(fā)現(xiàn)路由配置中children。

import Vue from 'vue'
import Router from 'vue-router'
import menus from '@/config/menu-config'
 
Vue.use(Router)
 
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/table',
      //name: 'table'  父組件沒有頁面，不選喲name
      component: {render: (e) => e("router-view")},
      children: [
        {
          path: 'table_show_view',   //不需要在前面加 ‘/'， 在導(dǎo)航中的index  使用 /table/table_show_view
          name: 'tableShow',
          component: () => import('@/components/table/TableView.vue'),
        },
        {
          path: 'queryTableView',   //不需要在前面加 ‘/'， 在導(dǎo)航中的index  使用 /table/queryTableView
          name: 'query_table_view',
          component: () => import('@/components/table/TableQueryShow.vue'),
        },
        {
          path: 'selectTableView',   //不需要在前面加 ‘/'， 在導(dǎo)航中的index  使用 /table/selectTableView
          name: 'selectTableView',
          component: () => import('@/components/table/SelectTableView.vue'),
        },
        {
          //默認(rèn)跳轉(zhuǎn)頁面，當(dāng)訪問  /table時(shí) 跳轉(zhuǎn)到  /table_show_view
          path: '/',
          name: 'fable_redirect',
          redirect: '/table/table_show_view',
        }
      ]
    },
    {
      path: '/form',
      component: {render: (e) => e("router-view")},
      children: [
        {
          path: 'form_insert_submit',
          name: 'formSubmit',
          component: () => import('@/components/form/FormView.vue'),
        },
        {
          path: 'query_form_view',
          name: 'queryFormView',
          component: () => import('@/components/form/FormView.vue'),
        },
        {
          //默認(rèn)跳轉(zhuǎn)頁面，當(dāng)訪問  /table時(shí) 跳轉(zhuǎn)到  /form/form_insert_submit
          path: '/',
          name: 'form_redirect',
          redirect: '/form/form_insert_submit',
        }
      ]
    },
    ,
    {
      path: '/pagination',
      component: {render: (e) => e("router-view")},
      children: [
        {
          path: 'paginationShow',
          name: 'paginationShow',
          component: () => import('@/components/pagination/Pagination.vue'),
        },
        {
          path: 'paginationTableShow',
          name: 'paginationTableShow',
          component: () => import('@/components/pagination/PaginationTableShow.vue'),
        },
        {
          //默認(rèn)跳轉(zhuǎn)頁面，當(dāng)訪問  /table時(shí) 跳轉(zhuǎn)到  /pagination/paginationShow
          path: '/',
          name: 'pagination_redirect',
          redirect: '/pagination/paginationShow',
        }
      ]
    }
  ]
})

導(dǎo)航欄的vue代碼如下：NavMenu.vue

<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        router
        unique-opened
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="/table">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>表格操作學(xué)習(xí)</span>
          </template>
          <el-menu-item-group class="over-hide">
            <template slot="title">分組一</template>
            <el-menu-item class="el-icon-user" index="/table_show_view">表格展示</el-menu-item>
            <el-menu-item class="el-icon-user" index="/queryTableView">表格查詢展示</el-menu-item>
            <el-menu-item class="el-icon-user" index="/selectTableView">選擇框表單</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="/form">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>表單學(xué)習(xí)</span>
          </template>
          <el-menu-item-group class="over-hide">
            <template slot="title">分組一</template>
            <el-menu-item  class="el-icon-user" index="/form_insert_submit">表單輸入提交</el-menu-item>
            <el-menu-item  class="el-icon-user" index="/query_form_view">表單查詢修改</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">選項(xiàng)4</template>
            <el-menu-item class="el-icon-user" index="/home">選項(xiàng)1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="/pagination">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>分頁插件</span>
          </template>
          <el-menu-item class="el-icon-user" index="/paginationShow">分頁查看</el-menu-item>
          <el-menu-item class="el-icon-user" index="/paginationTableShow">分頁獲取表數(shù)據(jù)</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<style scoped>
.over-hide {
  overflow: hidden;
}
</style>

<script>
import menu from '@/config/menu-config'
 
export default {
  data() {
    return {
      menu: menu
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

發(fā)現(xiàn)點(diǎn)擊之后頁面沒有展現(xiàn)指定頁面的功能。

可以看得出，是沒有路由展現(xiàn)/table_show_view  路由的信息。

經(jīng)過排查發(fā)現(xiàn)，路由中的children的訪問，必須把path路徑寫全才能訪問到。

如上圖的配置，如果需要訪問/table_show_view，需要完整的訪問路徑即：/table/table_show_view。

最終我的菜單配置如下：

<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        router
        unique-opened
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="/table">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>表格操作學(xué)習(xí)</span>
          </template>
          <el-menu-item-group class="over-hide">
            <template slot="title">分組一</template>
            <el-menu-item class="el-icon-user" index="/table_show_view">表格展示</el-menu-item>
            <el-menu-item class="el-icon-user" index="/table/queryTableView">表格查詢展示</el-menu-item>
            <el-menu-item class="el-icon-user" index="/table/selectTableView">選擇框表單</el-menu-item>
          </el-menu-item-group>
          <!-- <el-submenu index="1-4">
             <template slot="title">選項(xiàng)4</template>
             <el-menu-item index="/index/home">選項(xiàng)1</el-menu-item>
           </el-submenu>-->
        </el-submenu>
        <el-submenu index="/form">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>表單學(xué)習(xí)</span>
          </template>
          <el-menu-item-group class="over-hide">
            <template slot="title">分組一</template>
            <el-menu-item  class="el-icon-user" index="/form/form_insert_submit">表單輸入提交</el-menu-item>
            <el-menu-item  class="el-icon-user" index="/form/query_form_view">表單查詢修改</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">選項(xiàng)4</template>
            <el-menu-item class="el-icon-user" index="/index/home">選項(xiàng)1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="/pagination">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>分頁插件</span>
          </template>
          <el-menu-item class="el-icon-user" index="/pagination/paginationShow">分頁查看</el-menu-item>
          <el-menu-item class="el-icon-user" index="/pagination/paginationTableShow">分頁獲取表數(shù)據(jù)</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
</template>

除此之外，再使用路由的地方需要加入： <router-view></router-view>  才能使用路由

<template>
  <div id="app">
    <el-container>
      <el-header class="header">
        <vheader/>
      </el-header>
      <el-container>
        <el-aside class="menus_style">
          <navmenu></navmenu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from '@/components/layout/NavMenu'
import Header from '@/components/layout/Header'
 
export default {
  name: 'app',
  components: {
    'navmenu': NavMenu,
    'vheader': Header
  }
}
</script>

<style>
.menus_style{
  width: 200px;
  height: 100%;
}
.header {
  background-color: #409EFF;
  color: #fff;
  line-height: 60px;
}
</style>

感謝各位的閱讀，以上就是“vue-router中children怎么使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue-router中children怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！