Vue Son Routing Implementation Tab Tab

There are now many background management systems use the layout of the Tab tab. The left side is fixed, the right side is the corresponding page, each time you click the navigation title, only the corresponding page of the right side, and Vue wants to do TAB The tab, recommended using to implement the effect of the A tag, then use to realize the effect of the slot, put the corresponding page “plug” into the case, the following cases:

1, this is the page of the Tab tab, the layout does not say, mainly {a.title}} , where to point to the path you want to jump, this is the key, and

Import Navdata from "../../static / DATA / NAV "export default {name:" index ", data () {return {data: []}}, methods: {init ( = navdata.navdata;}}, created ()}}} }
/ * Container * / .index-Box {Width: 100%; Height: 100%; BackGround: Flex;} / * left navigation bar * / NAV {Width: 260px; Height: 100%; Background: # 323437; overflow: hidden; float: Left;} / * Navigation * / Nav H2 {Color: # f2fff; margin: 10px 0 10px 10px;} / * navigation title * / NAV A {Display: block; width: 100%; Height: 45px; color: # f2fff; background: # 2e3033; padding-left: 10px; line-height: 45px; font-size: 20px; margin-bottom: 10px;} / * right side * / .content {flex: 1; Padding: 20px;}
In this case, the default display is the page of my Tab tab, so other sub-pages I will use the sub-route configured in this page

If there are other needs, the place is needed to configure the sub-route can be

Import Vue from ‘Vue-router’ // Home IMPORT Tab from “../pages/tab”// page is an import pageone from” ../paGES / PageOne “// Page 2 Import PageTwo from” ./pages/pagetwo”// Page 3 Import PageThree from “../pages/pagerethree” Vue.use (router); Export Default New Router ({Routes: [ {// Default Displayed Path: ‘/’, Name: ‘Tab’, Component: Tab, Children: [{// Subway Default Displayed Path: ”, Name: ‘PageOne’, Component: PageOne }, {Path: ‘Pagetwo’, Name: ‘Pagetwo’, Component: PageTwo}, {Path: ‘PageThree’, Name: ‘PageThree’, Component: PageThree}]}]}
   This is another case: For example, I default to the login page, after logging in is home, it is the layout of the Tab tab, so I just want to configure the routing to the home page 

Import Vue from ‘Vue’Import Router from’ Vue-Router ‘// Import HelloWorld from’ @ / Components / HelloWorld ‘// Home frame import Index from “../pages/Index”;// Home import FunctionsIndex from” ../components/Functions/FunctionsIndex”;// list of data sources import FunctionsDbSource from “../components/Functions/FunctionsDbSource” // role management import FunctionsRoleManagement from “../components/Functions/FunctionsRoleManagement”// Log import Login from” ../pages/Login”Vue.use(Router); export default new Router ({linkExactActiveClass: “act”, Mode: “History”, Routes: [{// Home Path: ‘/ index’, name: ‘index’, component: index, children: [{// “Default display statistics page PATH: ‘, Name:’ Total ‘, Component: functionsindex}, {path:’ dbsource ‘, name:’ dbsource ‘, component: functionsdbsource}, {path:’ roleManagement ‘, name:’ roleManagement ‘, Component: FunctionsroleManagement}]}, // Default Display Login page {PATH: ‘/’, Name: ‘login’, Component: Login}

  3, configuration JSON file  
Because each system, the navigation title of the sidebar is different, and it is not guaranteed to be added again, so I recommend to give the navigation title, as long as the V-for loop Option 123 (Cycle specific operation returns to the first code block above), then introduced JSON at the tab page, assign it to the variable in the Vue method, create a modified method, then add another Navigation title, only need to increase in JSON

{“Navdata”: [{“Title”: “Papers”, “URL”: “/” }, {“Title”: “Sub Page 2”, “URL”: “/ PageTwo”}, {“Title”: “Bi Page 3”, “URL”: “/ PageThree”}]}

 4, after writing other pages, it can achieve this effect   

This is a sub-page , Default display

export default {name: “pageone”}
 h2 {color: #f2fff;}   

and then append mentioned above a default login page, and then displays the first after a successful loginThe Tab tab of the page, because did not open the database, I simulate the demo, manually log in to successfully enter the home page:

vue子路由跳转实现tab选项卡 Ok, the above completed a simple Tab tab, let’s try it.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.


© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment