vue-router implements tab tab page

This article mainly introduces the relevant methods of vue-router to implement the tab page in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

vue-router is the official routing plug-in for Vue.js, suitable for building tab applications. Vue's tab application is based on routing and components. Routing is used to set access paths and map paths to components. vue-router will render each component to the correct place.

First of all, the content in .vue is very simple, b988a8fd72e5e0e42afffd18f951b277 creates a label and specifies the path, 975b587bf85a482ea10b0a28848e78a4 renders the component matched by the route.

<template> 
 <p id="account"> 
 <p class="tab"> 
  <!-- 使用 router-link 组件来导航. --> 
  <!-- 通过传入 `to` 属性指定链接. --> 
  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> 
  <router-link to="/account/course">我的课程</router-link> 
  <!-- 注意这里的路径，course和order是account的子路由 --> 
  <router-link to="/account/order">我的订单</router-link> 
 </p> 
 <!-- 路由出口 --> 
 <!-- 路由匹配到的组件将渲染在这里 --> 
 <router-view></router-view> 
 </p> 
</template>

The structure is very simple. We have an account page account. The account also contains two tab pages, namely course and order.
When writing routes, you need to pay attention to the hierarchical relationship between pages. At first I wrote it like this:

##

import Vue from 'vue' 
import Router from 'vue-router' 
import Account from ... 
import CourseList from ... 
import OrderList from ... 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
 { 
 path: '/account', 
 name: 'account', 
 component: Account 
 }, 
 { 
 path: '/my-course', 
 name: 'course', 
 component: CourseList 
 }, 
 { 
 path: '/my-order', 
 name: 'order', 
 component: OrderList 
 } 
 ] 
})

Doing this will cause the click on d0d6ee6dc6bdae089f3fc5baf31e4206, jump to a new page instead of displaying the component in 975b587bf85a482ea10b0a28848e78a4.

The correct route should be written like this:

##

routes: [ 
 { 
 path: '/account', 
 name: 'account', 
 component: Account, 
 children: [ 
 {name: 'course', path: 'course', component: CourseList}, 
 {name: 'order', path: 'order', component: OrderList} 
 ] 
 } 
]

Register a root route account, register course and order as sub-routes in the account, and4bafd91003d53ef187a06b79114d3fd8 corresponds to to="account/course".

I just started working on Vue, and this problem has been bothering me for a long time, so I will record it here.

For tutorials on vue.js components, please click on the special vue.js component learning tutorial and Vue.js front-end component learning tutorial to learn.

Related recommendations:

About jqueryUI tab tab sample code

##JavaScript code sharing: tab label switching

How js and jquery implement the tab page function respectively

The above is the detailed content of vue-router implements tab tab page. For more information, please follow other related articles on the PHP Chinese website!