vue-router implements tab tab page-JS Tutorial-php.cn

vue-router implements tab tab page

小云云

Release： 2018-01-15 10:26:29

Original

2907 people have browsed it

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, creates a label and specifies the path, 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>

Copy after login

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 &#39;vue&#39; 
import Router from &#39;vue-router&#39; 
import Account from ... 
import CourseList from ... 
import OrderList from ... 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
 { 
 path: &#39;/account&#39;, 
 name: &#39;account&#39;, 
 component: Account 
 }, 
 { 
 path: &#39;/my-course&#39;, 
 name: &#39;course&#39;, 
 component: CourseList 
 }, 
 { 
 path: &#39;/my-order&#39;, 
 name: &#39;order&#39;, 
 component: OrderList 
 } 
 ] 
})

Copy after login

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

The correct route should be written like this:

routes: [ 
 { 
 path: &#39;/account&#39;, 
 name: &#39;account&#39;, 
 component: Account, 
 children: [ 
 {name: &#39;course&#39;, path: &#39;course&#39;, component: CourseList}, 
 {name: &#39;order&#39;, path: &#39;order&#39;, component: OrderList} 
 ] 
 } 
]

Copy after login

Register a root route account, register course and order as sub-routes in the account, and< router-link> 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!