router vue 页签文字_vue-router实现tab标签页(单页面)详解
vue-router 是 Vue.js 官方的路由插件,适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来,vue-router 会把各个组件渲染到正确的地方。
首先,.vue中的内容非常简单,创建标签,并指定路径,渲染路由匹配到的组件。
我的课程
我的订单
结构很简单,我们有一个账户页 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
}
]
})
这样做会使得点击 时,跳转到新页面,而不是在 中显示组件。
正确的路由应该这样写:
routes: [
{
path: '/account',
name: 'account',
component: Account,
children: [
{name: 'course', path: 'course', component: CourseList},
{name: 'order', path: 'order', component: OrderList}
]
}
]
注册一个根路由 account,将 course 和 order 注册为 account 中的子路由,和 中 to="account/course" 对应。
刚开始做 Vue,这个问题困扰了很久,特此记录。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程,进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
router vue 页签文字_vue-router实现tab标签页(单页面)详解相关推荐
- router vue 页签文字_vueRouter点击打开新页签
一.vue 路由使用 vue是单页面SPA,一般我们使用vue-router 设定路由进行页面跳转的时候,都是直接覆盖当前页面.比如,在a页面中有如下超链接 子任务详情 直接这样设置的话,会在当前页面 ...
- Vue开发实例(16)之创建标签页
引言 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手.带你飞! 即使你并非前端开发人员,对前端的开发流程进行一定的了 ...
- vue实现多个tab标签页的切换与关闭
1.实现效果 2.实现原理 vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存页,当前路由的状态管理. 将vuex中的数据保存到sessionStorage中,避免 ...
- Vant Tab标签页+下拉刷新+上拉加载
Vant Tab标签页+下拉刷新+上拉加载 <template><div class="invoicePickupBox"><div class=&q ...
- JavaScript面向对象—— 动态创建tab标签页
昨天呢,介绍了js中类的概念,以及使用类创建对象的过程.今天就用js中的类实现一个小的功能,动态添加.删除标签页.emmmmm,也有点像tab栏切换,不过比tab栏切换多了添加和删除的功能. 案例说明 ...
- html tab与jQuery,js与jquery分别实现tab标签页功能的方法
本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 *{margin: 0;padding: 0;} #myul li {li ...
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- html文字阴影php中文网,文字阴影text-shadow属性是什么?text-shadow属性详解
很多学生在学习css的之后,都想要实现某一行字的阴影效果,对于美工会使用ps,在css样式中,使用css中一个text-shadow标签就可以实现阴影效果,那么文字阴影text-shadow属性是什么 ...
- 微信小程序|Tab标签页
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 问题描述 在使用小 ...
- 点击链接跳转到新页面并显示对应的tab标签页切换
原理:从页面A跳转到页面B,则在A页面中跳转页面时传值,然后在B页面中写js获取该值并做对应的操作 附:tab标签页的制作链接:https://mp.csdn.net/postedit/1010531 ...
最新文章
- 2022-2028年中国高纯锑行业市场全景研究及发展趋势分析报告
- nero linux iso,NeroLINUX下载_NeroLINUX官方下载_NeroLINUX4.0.0.0-华军软件园
- 周杰伦入局元宇宙? 6200万个联名「幻象熊」40分钟全卖光!
- Mobile 拨打电话 发送短信
- 动态规划-KMP字符匹配算法
- 即将到来的 Android N 将具备这些新特性
- 如何在 ASP.NET CORE 中获取客户端 IP ?
- Python工作笔记-仿大佬的list赋值
- 因一个 Bug,Cassandra 4.0 暂停发布
- xcode11 新功能_Xcode 11功能
- EurekaClient启动报错:Invocation of destroy method failed on bean with name 'scopedTarget.eurekaClient'
- 怎么有效提高执行力?
- 学习笔记——Parallel Scavenge和Parallel Old
- simpleBGC32-软件代码开源
- html中em使用例子,HTML DOM Emphasized用法及代码示例
- 大数数字读法 unsigned long long
- php文字转语音amr,如何将文字转成语音?这几个方法一分钟搞定!
- Mitmproxy代理工具(一):环境配置
- 通过NFS(nfsroot)启动linux系统
- Golang学习系列第六天:操作MongoDB
热门文章
- 【C/C++】知识点
- 总算知道怎样从ImageMagick生成的数据转换成HICON: MagickGetImageBlob LookupIconIdFromDirectoryEx...
- 编译JDK源代码【转】
- 无废话ADO.NET 第三章 进行查询
- mysql select call_MySQL的SQL语句 - 数据操作语句(1)- CALL 语句
- 设计模式学习笔记1——类与类之间的关系
- linux 动态库系统目录,Linux共享库.so文件的命名和动态链接
- mysql水平拆分 hash_常用的数据库表水平拆分方案
- bios文件查看工具_“主板BIOS教程”手把手教你刷bios,多种bios教程
- 数据 3 分钟 | 农行因存在数据泄露风险被罚420万元、Databricks最新融资10亿美元...