用Vue前端路由实现tab栏切换

新建一个app.vue文件，写入下方代码

<template><div class="container"><div class="tab"><router-link to="/a" name='a'>管理1</router-link><br><router-link to="/b" name='b'>管理2</router-link><br><router-link to="/c" name='c'>管理3</router-link><br><router-link to="/d" name='d'>管理4</router-link><br></div><div class="content"><router-view></router-view></div></div>
</template><script></script><style scoped="scoped">.container{width: 80%;height: 600px;border: 1px solid red;margin: auto;display: flex;}.tab{flex: 1;border: 1px solid red;display: flex;flex-direction: column;text-align: center;}.tab a{color: black;text-decoration: none;}.tab a:hover{color: #FF0000;}.content{flex: 5;border: 1px solid red;}
</style>

router.js：

import Vue from 'vue/dist/vue.esm.js'
import Router from 'vue-router/dist/vue-router.js'
import A from '../components/a.vue'
import B from '../components/b.vue'
import C from '../components/c.vue'
import D from '../components/d.vue'
Vue.use(Router);//将router挂载到Vue对象当中
//创建路由对象
export default new Router({routes: [{path: '/',redirect:'/a'},{path: '/a',name:'a',component: A},{path: '/b',name:'b',component: B},{path: '/c',name:'c',component: C},{path: '/d',name:'d',component: D},]
})

index.js：

import Vue from 'vue/dist/vue.esm.js'
import App from './components/app.vue'
import router from './router/router.js'
const vm = new Vue({el:'#app',//render:h=>h(App),template: '<App/>',components: { App },router:router
})

用Vue前端路由实现tab栏切换相关推荐

Vue前端路由（Vue-router）
1.路由的概念路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由 ...
vant/vue——tab栏切换上下箭头功能实现
有的tab栏需要点击两次从而达到排序的功能下面是实现双重tab栏切换功能 css样式 .active {color: red; } .black{color: black; } 标签部分 <u ...
vue之tab栏切换
一个简单的tab栏切换组件,由tabs以及tab-pane组成效果图使用 <template><div class="container"><ta ...
前端——tab 栏切换案例
案例当鼠标点击上面相应的选项卡(tab),下面内容跟随变化分析 Tab栏切换有2个大的模块上面的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式下面的模块内 ...
Vue前端路由~非常详细哦，不要错过
下面是对Vue前端路由的整理,希望可以帮助到有需要的小伙伴~ 文章目录目标目录路由的基本概念与原理路由后端路由 SPA(Single Page Application) 前端路由实现简易前 ...
apiCloud + aui实现tab栏切换功能
本人apiCloud新手一枚,在学习的过程中,发现aui是一个非常好用的ui框架,我在作apiCloud项目时,最常用的就是aui框架.同时,发现sui也挺好,这两种框架可以同时在项目中混用,但是不能 ...
动态路由和tab页切换路由
动态路由和tab页切换路由文章目录动态路由和tab页切换路由一.在当前页面监听路由的改变 1.beforeRouterEnter 进入前拦截路由 2.beforeRouterUpdate 路由更 ...
四、vue前端路由（轻松入门vue）
轻松入门vue系列 Vue前端路由七.Vue前端路由 1. 路由的基本概念与原理后端路由前端路由实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用基本使用 ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...

用Vue前端路由实现tab栏切换

用Vue前端路由实现tab栏切换相关推荐

最新文章

热门文章