vue-router实现tab标签页（单页面）详解

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

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

<template>
 <div 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>
 </div>
</template>

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

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

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

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    基于Vue实现tab栏切换内容不断实时刷新数据功能

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • vue插件tab选项卡使用小结

    vue插件tab选项卡使用小结

    本文实例为大家分享了vue插件tab选项卡的使用方法,供大家参考,具体内容如下 基本用法 <template> <tab :options="tabOpt" :state.sync="stateIndex"></tab> </template> <script type="text/babel"> import tab from 'components/tab_touch'; expor

  • Vue.js组件tabs实现选项卡切换效果

    Vue.js组件tabs实现选项卡切换效果

    今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

  • 详解使用vue实现tab 切换操作

    在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').find('.item') .removeClass('current').eq(index).addClass('current'); // 为index位置的title添加current $('.tab .content').find('.item') .hide().eq(index).show()

  • 使用vue.js写一个tab选项卡效果

    使用vue.js写一个tab选项卡效果

    通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,但是在vue.js中,我们能不去操作dom我们就尽量不操作dom,那么该如何实现呢? 如果使用过vue-router,那么你会发现,vue-router在使用的时候其实就相当于一个tab选项卡,在点击之后,被点击的router-link元素会默认被添加上一个router-link-active的类,我们只需要设置这个类的样式即可.(当然,router-link-acti

  • Vue.js tab实现选项卡切换

    本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo

  • Vue.js组件tab实现选项卡切换

    Vue.js组件tab实现选项卡切换

    本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:

  • vue.js移动端tab组件的封装实践实例

    vue.js移动端tab组件的封装实践实例

    这是vue.js系列文章第二遍,第一篇讲述的是如何搭建vue.js的开发环境,计划按进度做成一款完整的app,当然前提是时间允许的话.本文用到了stylus语法,至于为什么使用stylus而不去用sass,主要是因为stylus来自于Node.js社区.总之stylus是一款高效的CSS预处理器,具体使用不在本文讨论范围.好了,废话不说了,下面讲述怎么封装tababr的切换. 底部tab进行页面切换,会用到vue里面的路由,也就是vue-router 我们在安装vue-cli时选中默认安装vu

  • bootstrap vue.js实现tab效果

    bootstrap vue.js实现tab效果

    本文实例为大家分享了bootstrap vue.js实现tab效果的具体代码,供大家参考,具体内容如下 项目目录结构 Student.js代码 function Student(){ this.baseInfo = { tabStatus : true , name : '张三', sex : 'male' } , this.parentsInfo = { tabStatus : false, fatherName : '张全蛋', motherName : '李铁柱' } , this.stu

  • Vue2.0 给Tab标签页和页面切换过渡添加样式的方法

    使用vue-router构建单页应用时,如何给当前页面的标签页添加样式呢? 1.在app.vue文件中你的nav中添加路由地址 2.依然在app.vue文件中,添加样式 不用在任何位置加class,只要在css中写上这个名称,样式自己随意改. 如何在单页切换的时候添加过渡? 1.在app.vue文件中,将router-view包裹在transition中,transition加个name. 2.在app.vue中添加css样式(你的transition的name是什么,第一个单词就是什么) 以上

  • JQuery标签页效果实例详解

    JQuery标签页效果实例详解

    本文实例讲述了JQuery标签页效果实现方法.分享给大家供大家参考,具体如下: 第一个标签页中鼠标滑过显示不同的标签页,第二个标签页中点击不同标签加载其他页面中的内容,加载等待的图片缓慢隐藏,效果图如下: /WebRoot/4.Tab.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l

  • vue实现兄弟组件之间跳转指定tab标签页

    目录 兄弟组件之间如何跳转指定tab标签页 场景 vue.js实现tab页面的跳转 tab标签 tab标签对应的展示的内容 vue实例中对应的数据以及函数 兄弟组件之间如何跳转指定tab标签页 场景 index跳转至list的第三个标签栏并刷新列表 // index methods: {      ...      go(){       this.$router.push({         name: 'list',        //要跳转的路由name         query: {

  • vue自定义标签和单页面多路由的实现代码

    1. 自定义组件标签(如在主页插入顶栏/侧边栏等)   比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue: import vHead from "./Header.vue"; #导入Header.vue为vHead,注意路径, Header.vue和Home.vue 在同一路径下用./ 然后导出组件: export default { components: { vHead, } };

  • Vue + Elementui实现多标签页共存的方法

    这个主题,早在一年前就已经创建,也写了一些内容,碍于在应用上体验始终不够完美,一直只存着草稿. 经过多个平台实践,多次迭代,一些功能加了又减了,最后还是回归了最精简的版本,已适用于大部分的场景,若有需要,可自行扩展. 关键逻辑 使用 keep-alive 来缓存各标签页 通过 vue-router 的 beforeEach 方法来更新标签信息 通过 vuex 来保存标签信息 通过 vuex 来使关闭页不被缓存 核心代码 定义 vuex 的跨页变量(store/index.js) import V

  • element tab标签管理路由页面的项目实践

    element tab标签管理路由页面的项目实践

    目录 样式 准备 思路 搭建 搭建页面框架 准备状态管理 监听路由变化 tab方法 登录 与 退出登录 样式 准备 搭建好的vue脚手架(elementui,router,vuex) elementui(NavMenu 导航菜单,Tabs 标签页) 思路 将打开的所有路由放到一个栈里(openTab:[]),tabs显示遍历openTab 初始状态,将首页推入栈,并设置激活状态 当切换路由时(监听路由变化),判断栈里是否存在这个路由,若存在,只改变激活状态:若不存在,则推入栈,并改变激活状态.

  • vue模仿网易云音乐的单页面应用

    说明 一直想做一个基于VUE的项目,但是因为项目往往要涉及到后端的知识(不会后端真的苦),所以就没有一直真正的动手去做一个项目. 直到发现GitHub上有网易云音乐的api NeteaseCloudMusicApi,才开始动手去做. 仅仅完成了首页,登入,歌单,歌曲列表页. 项目地址 https://github.com/qp97vi/music 项目成功运行还要把后端api在本地运行 前端技术栈 vue2+vuex+vue-router+axios+mint-ui+webpack 遇到的问题

  • vue router 跳转时打开新页面的示例方法

    记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用 <a> 标签,但事实上vue2版本的 <router-link> 是支持 target="_

  • 详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

    详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

    在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些. 先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件. 效果预览 关键代码及分析如下: <template> // 每一个 tab 绑定了一个点击事件,传入的参数对应着

  • 纯css+js写的一个简单的tab标签页带样式

    纯css+js写的一个简单的tab标签页带样式

    最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了. 先看效果图:  接下来看下代码怎么写的吧: 一.sp文件easytab.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String b

随机推荐