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编程起步(第七课)
Jan 10 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
React forwardRef的使用方法及注意点
Jun 13 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 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开发中常用的8个小技巧
2008/08/27 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
php报错502badgateway解决方法
2019/10/11 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
《与孩子一起学编程》python自测题
2018/05/27 Python
Python GUI编程完整示例
2019/04/04 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
工作交流会欢迎词
2014/01/12 职场文书
员工晚婚的请假条
2014/02/08 职场文书
理发店策划方案
2014/06/05 职场文书
重点工程汇报材料
2014/08/27 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
赢在执行观后感
2015/06/16 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书