快捷導(dǎo)航

vue子路由跳轉(zhuǎn)實(shí)現(xiàn)tab選項(xiàng)卡

更新時(shí)間：2019年07月24日 11:07:35 作者：壞丶毛病

這篇文章主要為大家詳細(xì)介紹了vue子路由跳轉(zhuǎn)實(shí)現(xiàn)tab選項(xiàng)卡，完成一個(gè)簡(jiǎn)單的tab選項(xiàng)卡布局，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

現(xiàn)在很多的后臺(tái)管理系統(tǒng)都采用tab選項(xiàng)卡的布局，左邊是導(dǎo)航欄固定，右邊是對(duì)應(yīng)的頁(yè)面，每次點(diǎn)擊左邊的導(dǎo)航標(biāo)題，只有右面的對(duì)應(yīng)頁(yè)面再切換，而vue要做tab選項(xiàng)卡，推薦使用<router-link></router-link>實(shí)現(xiàn)a標(biāo)簽的效果，然后使用<router-view></router-view>實(shí)現(xiàn)插槽的效果，把對(duì)應(yīng)的頁(yè)面 "塞" 進(jìn)去，具體實(shí)現(xiàn)看下面的案例：

1、這是tab選項(xiàng)卡的頁(yè)面，布局就不說(shuō)了，主要是<router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}</router-link>，其中to指向你要跳轉(zhuǎn)的路徑，這是關(guān)鍵，而<router-view></router-view>就是最終其他子頁(yè)面要顯示的地方

<template>
  <div class="index-box">
    <nav>
      <h1>導(dǎo)航</h1>
      <!-- 所有的導(dǎo)航標(biāo)題，進(jìn)行路由跳轉(zhuǎn)指向 -->
      <router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}</router-link>
    </nav>
    <div class="content">
      <!-- 路由插槽：路由跳轉(zhuǎn)的位置 -->
      <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;
  }
  /* 左側(cè)導(dǎo)航條 */
  nav{
    width: 260px;
    height: 100%;
    background: #323437;
    overflow: hidden;
    float: left;
  }
  /* 導(dǎo)航 */
  nav h1{
    color: #f2ffff;
    margin: 10px 0 10px 10px;
  }
  /* 導(dǎo)航標(biāo)題 */
  nav a{
    display: block;
    width: 100%;
    height: 45px;
    color: #f2ffff;
    background: #2e3033;
    padding-left: 10px;
    line-height: 45px;
    font-size: 20px;
    margin-bottom: 10px;
  }
  /* 右側(cè)內(nèi)容 */
  .content{
    flex: 1;
    padding: 20px;
  }
</style>

2、路由配置

這個(gè)案例中，默認(rèn)顯示的就是我tab選項(xiàng)卡的頁(yè)面，所以其他子頁(yè)面我就以這個(gè)頁(yè)面配置的子路由

如果有其他需求，就再需要的地方配置子路由即可

import Vue from 'vue'
import Router from 'vue-router'
// 首頁(yè)
import Tab from "../pages/Tab"
// 頁(yè)面一
import PageOne from "../pages/PageOne"
// 頁(yè)面二
import PageTwo from "../pages/PageTwo"
// 頁(yè)面三
import PageThree from "../pages/PageThree"
 
Vue.use(Router);
 
export default new Router({
 routes: [
  {
    // 默認(rèn)顯示的頁(yè)面
    path: '/',
    name: 'Tab',
    component: Tab,
    children:[
      {  
        // 子路由中默認(rèn)顯示的頁(yè)面
        path: '',
        name: 'PageOne',
        component: PageOne
      },
      {
        path: 'PageTwo',
        name: 'PageTwo',
        component: PageTwo
      },
      {
        path: 'PageThree',
        name: 'PageThree',
        component: PageThree
      }
    ]
  }
 ]
})

這里再提供一種情況：比如我默認(rèn)顯示的是登錄頁(yè)面，登錄進(jìn)入后是首頁(yè)，是tab選項(xiàng)卡的布局，所以我只要給首頁(yè)配置子路由就可以了

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// 首頁(yè)框架
import Index from "../pages/Index";
// 首頁(yè)
import FunctionsIndex from "../components/Functions/FunctionsIndex";
// 數(shù)據(jù)源列表
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: [
  {
   // 首頁(yè)
   path: '/Index',
   name: 'Index',
   component: Index,
   children: [
    {
     // 首頁(yè)中默認(rèn)顯示統(tǒng)計(jì)頁(yè)面
     path: '',
     name: 'Total',
     component: FunctionsIndex
    },
    {
     path: 'DbSource',
     name: 'DbSource',
     component: FunctionsDbSource
    },
    {
     path: 'RoleManagement',
     name: 'RoleManagement',
     component: FunctionsRoleManagement
    }
   ]
  },
   // 默認(rèn)顯示登錄頁(yè)面
  {
   path: '/',
   name: 'Login',
   component: Login
  }
 ]
})

3、配置json文件

因?yàn)槊總€(gè)系統(tǒng)，側(cè)邊欄的導(dǎo)航標(biāo)題都不一樣，而且也不能保證后期不會(huì)再加，所以我推薦把導(dǎo)航標(biāo)題提出來(lái)，到時(shí)候只要v-for循環(huán)<router-link>就可以了（循環(huán)具體操作返回上面看第一個(gè)代碼塊），然后在選項(xiàng)卡頁(yè)面引入json，在vue方法中把它賦值給data中的變量，創(chuàng)建后調(diào)用方法即可，之后再增加導(dǎo)航標(biāo)題，只需要在json中增加即可

{
 "navData":[
 {
  "title":"子頁(yè)一",
  "url":"/"
 },
 {
  "title":"子頁(yè)二",
  "url":"/PageTwo"
 },
 {
  "title":"子頁(yè)三",
  "url":"/PageThree"
 }
 ]
}

4、之后寫(xiě)好其他頁(yè)面，就能實(shí)現(xiàn)這個(gè)效果了

<template>
  <h1>這是子頁(yè)一，默認(rèn)顯示</h1>
</template>
 
<script>
  export default {
    name: "PageOne"
  }
</script>
 
<style scoped>
  h1{
    color: #f2ffff;
  }
</style>

效果圖：