溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
現在很多的后臺管理系統都采用tab選項卡的布局，左邊是導航欄固定，右邊是對應的頁面，每次點擊左邊的導航標題，只有右面的對應頁面再切換，而vue要做tab選項卡，推薦使用<router-link></router-link>實現a標簽的效果，然后使用<router-view></router-view>實現插槽的效果，把對應的頁面 "塞" 進去，具體實現看下面的案例：
1、這是tab選項卡的頁面，布局就不說了，主要是<router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}</router-link>，其中to指向你要跳轉的路徑，這是關鍵，而<router-view></router-view>就是最終其他子頁面要顯示的地方
<template>
<div class="index-box">
<nav>
<h2>導航</h2>
<!-- 所有的導航標題，進行路由跳轉指向 -->
<router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}</router-link>
</nav>
<div class="content">
<!-- 路由插槽：路由跳轉的位置 -->
<router-view></router-view>
</div>
</div>
</template>
<script>
import navData from "../../static/data/nav"
export default {
name: "Index",
data(){
return {
Data:[]
}
},
methods:{
init(){
this.Data = navData.navData;
}
},
created(){
this.init();
}
}
</script>
<style scoped>
/* 容器 */
.index-box{
width: 100%;
height: 100%;
background: #212224;
display: flex;
}
/* 左側導航條 */
nav{
width: 260px;
height: 100%;
background: #323437;
overflow: hidden;
float: left;
}
/* 導航 */
nav h2{
color: #f2ffff;
margin: 10px 0 10px 10px;
}
/* 導航標題 */
nav a{
display: block;
width: 100%;
height: 45px;
color: #f2ffff;
background: #2e3033;
padding-left: 10px;
line-height: 45px;
font-size: 20px;
margin-bottom: 10px;
}
/* 右側內容 */
.content{
flex: 1;
padding: 20px;
}
</style>
2、路由配置
這個案例中，默認顯示的就是我tab選項卡的頁面，所以其他子頁面我就以這個頁面配置的子路由
如果有其他需求，就再需要的地方配置子路由即可
import Vue from 'vue'
import Router from 'vue-router'
// 首頁
import Tab from "../pages/Tab"
// 頁面一
import PageOne from "../pages/PageOne"
// 頁面二
import PageTwo from "../pages/PageTwo"
// 頁面三
import PageThree from "../pages/PageThree"
Vue.use(Router);
export default new Router({
routes: [
{
// 默認顯示的頁面
path: '/',
name: 'Tab',
component: Tab,
children:[
{
// 子路由中默認顯示的頁面
path: '',
name: 'PageOne',
component: PageOne
},
{
path: 'PageTwo',
name: 'PageTwo',
component: PageTwo
},
{
path: 'PageThree',
name: 'PageThree',
component: PageThree
}
]
}
]
})
這里再提供一種情況：比如我默認顯示的是登錄頁面，登錄進入后是首頁，是tab選項卡的布局，所以我只要給首頁配置子路由就可以了
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// 首頁框架
import Index from "../pages/Index";
// 首頁
import FunctionsIndex from "../components/Functions/FunctionsIndex";
// 數據源列表
import FunctionsDbSource from "../components/Functions/FunctionsDbSource"
// 角色管理
import FunctionsRoleManagement from "../components/Functions/FunctionsRoleManagement"
// 登錄
import Login from "../pages/Login"
Vue.use(Router);
export default new Router({
linkExactActiveClass: "act",
mode: "history",
routes: [
{
// 首頁
path: '/Index',
name: 'Index',
component: Index,
children: [
{
// 首頁中默認顯示統計頁面
path: '',
name: 'Total',
component: FunctionsIndex
},
{
path: 'DbSource',
name: 'DbSource',
component: FunctionsDbSource
},
{
path: 'RoleManagement',
name: 'RoleManagement',
component: FunctionsRoleManagement
}
]
},
// 默認顯示登錄頁面
{
path: '/',
name: 'Login',
component: Login
}
]
})
3、配置json文件
因為每個系統，側邊欄的導航標題都不一樣，而且也不能保證后期不會再加，所以我推薦把導航標題提出來，到時候只要v-for循環<router-link>就可以了（循環具體操作返回上面看第一個代碼塊），然后在選項卡頁面引入json，在vue方法中把它賦值給data中的變量，創建后調用方法即可，之后再增加導航標題，只需要在json中增加即可
{
"navData":[
{
"title":"子頁一",
"url":"/"
},
{
"title":"子頁二",
"url":"/PageTwo"
},
{
"title":"子頁三",
"url":"/PageThree"
}
]
}
4、之后寫好其他頁面，就能實現這個效果了
<template>
<h2>這是子頁一，默認顯示</h2>
</template>
<script>
export default {
name: "PageOne"
}
</script>
<style scoped>
h2{
color: #f2ffff;
}
</style>
效果圖：
再追加一個上面所說的默認是登錄頁面，然后登錄成功后顯示首頁的tab選項卡的效果圖，因為沒開數據庫，我就模擬演示一下,手動登錄成功進入主頁：
好了，以上就完成了一個簡單的tab選項卡布局，大家去試試吧。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
