vue-router中關(guān)于children的使用方法
更新時(shí)間：2022年08月23日 10:56:59 作者：Web_阿凱
這篇文章主要介紹了vue-router中關(guān)于children的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
關(guān)于children的使用
children的使用場(chǎng)景
比如頁面左側(cè)顯示菜單，右側(cè)顯示不同菜單下的內(nèi)容，類似如下element網(wǎng)站，那么右側(cè)部分的內(nèi)容就是當(dāng)前頁面的children
存在如下場(chǎng)景，點(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>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js中用v-bind綁定class的注意事項(xiàng)
關(guān)于數(shù)據(jù)綁定一個(gè)常見需求就是操作元素的class列表和它的內(nèi)聯(lián)樣式。因?yàn)樗鼈兌际菍傩?，我們可以?v-bind 處理它們，但是使用v-bind綁定class的時(shí)候我們要有一些注意事項(xiàng)，下面這篇文章就給大家分享了下要注意的方面，希望能對(duì)大家有所幫助，下面來一起看看吧。2016-12-12
解決vue.js中settimeout遇到的問題(時(shí)間參數(shù)短效果不穩(wěn)定)
這篇文章主要介紹了解決vue.js中settimeout遇到的問題(時(shí)間參數(shù)短效果不穩(wěn)定)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue上傳文件formData入?yún)榭?接口請(qǐng)求500的解決
這篇文章主要介紹了vue上傳文件formData入?yún)榭?接口請(qǐng)求500的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue-cli Eslint在vscode里代碼自動(dòng)格式化的方法
本篇文章主要介紹了Vue-cli Eslint在vscode里代碼自動(dòng)格式化的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
手寫Vue內(nèi)置組件component的實(shí)現(xiàn)示例
本文主要介紹了手寫Vue內(nèi)置組件component的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
js節(jié)流防抖應(yīng)用場(chǎng)景,以及在vue中節(jié)流防抖的具體實(shí)現(xiàn)操作
這篇文章主要介紹了js節(jié)流防抖應(yīng)用場(chǎng)景,以及在vue中節(jié)流防抖的具體實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue中循環(huán)多個(gè)li(表格)并獲取對(duì)應(yīng)的ref的操作代碼
我想要獲取每一個(gè)循環(huán)并獲取每一個(gè)li(或者其它循環(huán)項(xiàng))的ref,以便于后續(xù)的操作,接下來通過本文給大家分享vue中循環(huán)多個(gè)li(表格)并獲取對(duì)應(yīng)的ref的操作代碼,感興趣的朋友跟隨小編一起看看吧2024-02-02
Pinia是Vue.js的輕量級(jí)狀態(tài)管理庫,比起vue3中的Vuex狀態(tài)管理,pinia更輕量,更容易使用,下面這篇文章主要給大家介紹了關(guān)于Vue3狀態(tài)管理之Pinia的入門使用教程,需要的朋友可以參考下2022-04-04
vue 實(shí)現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗(yàn)證
這篇文章主要介紹了vue 實(shí)現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗(yàn)證，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Vue插件實(shí)現(xiàn)過程中遇到的問題總結(jié)
隨著Vue.js越來越火,Vue.js 的相關(guān)插件也在不斷的被貢獻(xiàn)出來,數(shù)不勝數(shù),這篇文章主要給大家介紹了關(guān)于Vue插件實(shí)現(xiàn)過程中遇到的問題,需要的朋友可以參考下2021-08-08