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 相关文章推荐
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
深入探寻javascript定时器
Jan 02 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
JavaScript实现星级评价效果
May 17 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
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
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php下载文件的代码示例
2012/06/29 PHP
php简单压缩css样式示例
2016/09/22 PHP
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
Python发送email的3种方法
2015/04/28 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
python正则分析nginx的访问日志
2017/01/17 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
业务员岗位职责范本
2013/12/15 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
文明班级建设方案
2014/05/15 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
付款承诺函范文
2015/01/21 职场文书
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript