vue router-view的嵌套顯示實(shí)現(xiàn)
const routes = [ { path: ’/’, name: ’導(dǎo)航1’, component: Home, children:[ {path: ’/customer’,name: ’Customer’,// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: 'about' */ ’../views/Customer.vue’) }, {path: ’/pageOne’,name: ’頁面1’,component: PageOne, }, {path: ’/pageTwo’,name: ’頁面2’,component: PageTwo, }, ] }, { path: ’/navigation’, name: ’導(dǎo)航2’, component: Home, children:[ {path: ’/pageThree’,name: ’頁面3’,component: PageThree, }, {path: ’/pageFour’,name: ’頁面4’,component: PageFour }, ] },二、vue頁面嵌套
App.vue先配置第一個(gè)router-view
// An highlighted block <router-view></router-view>
Home.vue配置第二個(gè)router-view
// An highlighted block<template> <div> <el-container style='height: 500px; border: 1px solid #eee'> <el-aside style='background-color: rgb(238, 241, 246)'> <el-menu><el-submenu v-for='(item,index) in $router.options.routes' :index='index+’’'><template slot='title'><i class='el-icon-sell'></i>{{item.name}}</template> <el-menu-item v-for='(item2,index2) in item.children' :index='index+’-’+index2'>{{item2.name}}</el-menu-item></el-submenu> </el-menu> </el-aside> <el-container> <el-header style='text-align: right; font-size: 12px'><el-dropdown> <i style='margin-right: 15px'></i> <el-dropdown-menu slot='dropdown'> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>刪除</el-dropdown-item> </el-dropdown-menu></el-dropdown><span>王小虎</span> </el-header> <el-main><router-view></router-view> </el-main> </el-container> </el-container></div></template><style>.el-header { background-color: #B3C0D1; color: #333; line-height: 60px;}.el-aside { color: #333;}</style><script>export default {};</script>三、嵌套聯(lián)系
首先,在訪問http://localhost:8181/時(shí)會(huì)進(jìn)入第一層嵌套,此時(shí)進(jìn)入第一個(gè)router-view:Home.vue。然后當(dāng)訪問pageone時(shí),會(huì)連帶Home.vue繼續(xù)訪問。
因?yàn)閞outer-view的嵌套顯示和路由路基的嵌套有關(guān),可以看到,在路由里面,導(dǎo)航一的路徑底下分別是頁面一以及頁面二的路由路徑。所以當(dāng)訪問頁面一pageone時(shí),會(huì)先訪問上級(jí)路徑Home.vue頁面。加入Home.vue頁面沒有放置router-view,那么下級(jí)頁面將無法顯示
到此這篇關(guān)于vue router-view的嵌套顯示實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue router-view嵌套顯示內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. IntelliJ IDEA導(dǎo)入jar包的方法2. docker鏡像完全卸載的操作步驟3. IntelliJ IDEA配置Tomcat服務(wù)器的方法4. idea刪除項(xiàng)目的操作方法5. 使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細(xì)教程6. IntelliJ IDEA調(diào)整字體大小的方法7. idea打開多個(gè)窗口的操作方法8. idea導(dǎo)入maven項(xiàng)目的方法9. IntelliJ IDEA設(shè)置自動(dòng)提示功能快捷鍵的方法10. IntelliJ IDEA安裝插件的方法步驟

網(wǎng)公網(wǎng)安備