vue-router嵌套路由,默认子路由设置
需求:
1. 底部5个tab选项卡
2. 其中一个里面又有tab选项卡
3. 显示active状态
4. 底部选项卡和子路由的选项卡都默认选择第一个选项卡
举个栗子:
示例是随便写的。
1.路由文件 router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Brand from '@/components/Brand'
import Cart from '@/components/Cart'
import Member from '@/components/Member'
import Me from '@/components/Me'
import BrandA from '@/components/BrandA'
import BrandB from '@/components/BrandB'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: Home},{path: '/brand',component: Brand,redirect: '/brand/brand-a',children: [{path: 'brand-a',name: 'BrandA',component: BrandA},{path: 'brand-b',name: 'BrandB',component: BrandB}]},{path: '/cart',name: 'Cart',component: Cart},{path: '/member',name: 'Member',component: Member},{path: '/me',name: 'Me',component: Me}]
})
2.底部选项卡 Tabs.vue
<template><div class="tabs"><ul><router-link to="/" tag="li" exact><div><i class="icon iconfont icon-home"></i></div><div>Home</div></router-link><router-link to="/brand" tag="li"><div><i class="icon iconfont icon-zuanshi"></i></div><div>Brand</div></router-link><router-link to="/cart" tag="li"><div><i class="icon iconfont icon-gouwucheman"></i></div><div>Cart</div></router-link><router-link to="/member" tag="li"><div><i class="icon iconfont icon-huiyuanqia"></i></div><div>Member</div></router-link><router-link to="/me" tag="li"><div><i class="icon iconfont icon-wo"></i></div><div>Me</div></router-link></ul></div>
</template><script>
export default {name: 'Tabs',data () {return {}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tabs {position: absolute;left: 0;bottom: 0;width: 100%;background: #fff;padding: 5px 0;
}
.tabs ul {display: table;width: 100%;
}
.tabs ul li {display: table-cell;font-size: 16px;
}
.router-link-active {color: #f06;
}
</style>
3.Brand.vue 底部选项卡其中一个页面(里面含有子路由)
<template><div class="brand"><h1>Brand</h1><BrandTab></BrandTab></div>
</template><script>
import BrandTab from "./BrandTab.vue"
export default {name: 'Brand',data () {return {}},components: {BrandTab}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
4.BrandTab.vue(Brand里面含有子路由的Tab)
<template><div class="brand-tab"><ul><router-link to="brand-a" tag="li" exact><div>Brand-A</div></router-link><router-link to="brand-b" tag="li"><div>Brand-B</div></router-link></ul><router-view/></div>
</template><script>
export default {name: 'BrandTab',data () {return {}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.brand-tab ul {width: 100%;display: table;
}
.brand-tab ul li {display: table-cell;border-bottom: 2px solid #ccc;padding: 4px 0;
}
.router-link-active {color: red;border-bottom: 2px solid red !important;
}</style>
vue-router嵌套路由,默认子路由设置相关推荐
- vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
- Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战 前言 一.什么是单页面应用及实现前端路 ...
- vue.js嵌套路由
文章目录 vue.js嵌套路由,如何使用? 总结说明: 效果图预览: 相关文件代码: 1. ```main.js```文件 2. ```app.vue```文件 3. ```header.vue``` ...
- 面试考问Vue Router 的路由模式,这个回答令我直接出局!
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
- 你真的理解 Vue Router 的路由模式吗?
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
- 面试考问Vue Router 的路由模式,这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
- Vue Router 命名路由、(嵌套)命名视图
命名路由 在Vue Router中 除了 path 之外,还可以为任何路由提供 name. const routes = [{path: '/user/:username',name: 'user', ...
- vue router children 路由变了 组件没变_Vue.js从零开始——路由(2)
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...
- vue.js嵌套路由-------由浅入深
嵌套路由就是路由里面嵌套他的子路由 子路由关键属性children 每一个子路由里面可以嵌套多个组件 子组件又有路由导航和路由容器 <router-link to="/父路由的地址名字 ...
- 注意避坑,Vue Router 4: 路由参数在 created/setup 时不可用
有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考 ...
最新文章
- SpringMVC处理Date类型的成员变量方法
- cuda 本地内存使用_CUDA 基础知识博客整理
- windows API(一)
- Mocha BSM基础架构管理——网络设备
- jenkins+testlink+python搭建自动化测试环境
- 安装python解释器
- 学习手记(2021/3/19~?)
- 垃圾收集算法,垃圾收集器_为什么我不能关闭垃圾收集器?
- sd卡和sdio sdhc_想买TF卡,那些标注卡上的参数看懂了么?
- 猜数字小c语言游戏课程任务书,C语言课程设计猜数字游戏姚成.doc
- 使用js获取ajax对象,JS获取dom 对象 ajax操作 读写cookie函数
- 数组作为方法的参数实例和细节(Java)
- FPGA概述(对FPGA的基本认识)
- java 循环详解_Java for循环详解
- 电脑网络连接为什么常常连接不上
- NOI OJ 1.3 11:计算浮点数相除的余数 C语言
- Facebook和Heroku结成伙伴关系
- ios开发-分享一些免费的接口
- 阿里云code登录,阿里云code使用教程
- 对全职高手的自然语言处理