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模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 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
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
vue 组件简介
2020/07/31 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
python实现的生成word文档功能示例
2019/08/23 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
django从后台返回html代码的实例
2020/03/11 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
《悯农》教学反思
2014/04/28 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫