vue-router实现tab标签页(单页面)详解


Posted in Javascript onOctober 17, 2017

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前端组件学习教程,进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
常用简易JavaScript函数
Apr 09 Javascript
JS 类型转换常见方法小结
May 31 Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
QT与javascript交互数据的实现
May 26 Javascript
BACKBONE.JS 简单入门范例
Oct 17 #Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 #Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 #Javascript
JS实现div模块的截图并下载功能
Oct 17 #Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 #Javascript
AngularJS 控制器 controller的详解
Oct 17 #Javascript
VUE前端cookie简单操作
Oct 17 #Javascript
You might like
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
浅谈php7的重大新特性
2015/10/23 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
Python深入学习之特殊方法与多范式
2014/08/31 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
python能开发游戏吗
2020/06/11 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
客服实习的个人自我鉴定
2013/10/20 职场文书
入学生会自荐书范文
2014/02/05 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
财务经理岗位职责
2015/01/31 职场文书
班主任开场白
2015/06/01 职场文书
升学宴家长答谢词
2015/09/29 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis