vue-router实现tab标签页-js教程-PHP中文网

vue-router实现tab标签页

小云云

发布： 2018-01-15 10:26:29

原创

2963 人浏览过

本文主要为大家详细介绍了vue-router实现tab标签页的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

vue-router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把各个组件渲染到正确的地方。

首先，.vue中的内容非常简单，创建标签，并指定路径，渲染路由匹配到的组件。

<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>

登录后复制

结构很简单，我们有一个账户页 account，account 中还包含两个标签页，分别是课程 course 和订单 order。
在写路由的时候，需要注意页面间层级关系，开始我是这样写的：

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 
 } 
 ] 
})

登录后复制

这样做会使得点击时，跳转到新页面，而不是在中显示组件。
正确的路由应该这样写：

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} 
 ] 
 } 
]

登录后复制

注册一个根路由 account，将 course 和 order 注册为 account 中的子路由，和中 to="account/course" 对应。

刚开始做 Vue，这个问题困扰了很久，特此记录。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程，进行学习。