需求：
1. 底部5個tab選項卡
2. 其中一個里面又有tab選項卡
3. 顯示active狀態
4. 底部選項卡和子路由的選項卡都默認選擇第一個選項卡

舉個栗子：

示例是隨便寫的。

1.路由文件 router/index.js

import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import Brand from '@/components/Brand' import Cart from '@/components/Cart' import Member from '@/components/Member' import Me from '@/components/Me' import BrandA from '@/components/BrandA' import BrandB from '@/components/BrandB'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: Home},{path: '/brand',component: Brand,redirect: '/brand/brand-a',children: [{path: 'brand-a',name: 'BrandA',component: BrandA},{path: 'brand-b',name: 'BrandB',component: BrandB}]},{path: '/cart',name: 'Cart',component: Cart},{path: '/member',name: 'Member',component: Member},{path: '/me',name: 'Me',component: Me}] })

2.底部選項卡 Tabs.vue

<template><div class="tabs"><ul><router-link to="/" tag="li" exact><div><i class="icon iconfont icon-home"></i></div><div>Home</div></router-link><router-link to="/brand" tag="li"><div><i class="icon iconfont icon-zuanshi"></i></div><div>Brand</div></router-link><router-link to="/cart" tag="li"><div><i class="icon iconfont icon-gouwucheman"></i></div><div>Cart</div></router-link><router-link to="/member" tag="li"><div><i class="icon iconfont icon-huiyuanqia"></i></div><div>Member</div></router-link><router-link to="/me" tag="li"><div><i class="icon iconfont icon-wo"></i></div><div>Me</div></router-link></ul></div> </template><script> export default {name: 'Tabs',data () {return {}} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .tabs {position: absolute;left: 0;bottom: 0;width: 100%;background: #fff;padding: 5px 0; } .tabs ul {display: table;width: 100%; } .tabs ul li {display: table-cell;font-size: 16px; } .router-link-active {color: #f06; } </style>

3.Brand.vue 底部選項卡其中一個頁面（里面含有子路由）

<template><div class="brand"><h1>Brand</h1><BrandTab></BrandTab></div> </template><script> import BrandTab from "./BrandTab.vue" export default {name: 'Brand',data () {return {}},components: {BrandTab} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style>

4.BrandTab.vue（Brand里面含有子路由的Tab）

<template><div class="brand-tab"><ul><router-link to="brand-a" tag="li" exact><div>Brand-A</div></router-link><router-link to="brand-b" tag="li"><div>Brand-B</div></router-link></ul><router-view/></div> </template><script> export default {name: 'BrandTab',data () {return {}} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .brand-tab ul {width: 100%;display: table; } .brand-tab ul li {display: table-cell;border-bottom: 2px solid #ccc;padding: 4px 0; } .router-link-active {color: red;border-bottom: 2px solid red !important; }</style>

總結

以上是生活随笔為你收集整理的vue-router嵌套路由，默认子路由设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。