vue路由+vue-cli实现tab切换
第一步:搭建环境
安装vue-cli
cnpm install -g vue-cli
安装vue-router
cnpm install -g vue-router
使用vue-cli初始化项目
vue init webpack cppba-web
进入到目录
cd cppba-web
安装依赖
cnpm install
开始运行
npm run dev
(这里提个画外音:配置文件的时候会让你选择,这里推荐:
? Use ESLint to lint your code? 代码规范,推荐 N
? Setup unit tests with Karma + Mocha? 单元测试,推荐 N
? Setup e2e tests with Nightwatch? E2E测试,N
这三个很重要,起码对我来说是的)
第二步:在src文件下新建page目录
第三步:在components新建tabBar.vue文件夹,放置路由tab切换组件
安装vue-cli cnpm install -g vue-cli
安装vue-router cnpm install -g vue-router
使用vue-cli初始化项目 vue init webpack cppba-web
进入到目录 cd cppba-web
安装依赖 cnpm install
开始运行 npm run dev
第四步:在page目录下新建Home.vue和Me.vue文件,这是放置切换路由页面的显示
Home.vue代码
<template>
<div>
首页
</div>
</template> <script>
</script> <style>
</style> Me.vue代码
<template>
<div>
我
</div>
</template> <script>
</script> <style>
</style>
第五步:渲染路由与页面,在App.vue中
<template>
<div id="app"> <router-view></router-view>
<tabBar></tabBar>
</div>
</template> <script>
import tabBar from './components/tabBar'
export default {
name: 'App',
components:{
tabBar
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
第六步:在router目录下的index.js中配置路由
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../page/Home.vue'
import Me from '../page/Me.vue' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
component: Home
},
{
path:'/home',
component:Home
},
{
path:'/me',
component:Me
}
]
})
最后放上成果:
vue路由+vue-cli实现tab切换的更多相关文章
- vue.cli实现tab切换效果
<template> <div class="cp-select"> <div class="lef ...
- 六、vue路由Vue Router
一.基本概念 route, routes, router 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, a ...
- vue实现tab切换功能
最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...
- vue + element-ui 制作tab切换(切换vue组件,踩坑总结)
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
- (vue.js)Vue element tab 每个tab用一个路由来管理?
(vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理 时间:2017/5/13 0:24:01 关键词: 关于网友提出的“ (vue.js) ...
- vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
- VUE 实现tab切换页面效果
一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)
本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...
- vue实现tab切换
需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...
随机推荐
- PageHelper踩坑
刚开始死活分不了页,只显示默认的前 10条.搞了一下午,打了无数个断点都试不出毛病在哪. 下班又死磕到快8点,就在我已经绝望的时候,最后终于试出来了,把page.getTotal()给传到前端就好了. ...
- 异数OS 织梦师-水母(一)--消息队列篇
异数OS 织梦师-水母(一)–消息队列篇 本文来自异数OS社区 github: https://github.com/yds086/HereticOS 异数OS社区QQ群: 652455784 异数O ...
- RocketMQ 实战之快速入门
原文地址:https://www.jianshu.com/p/824066d70da8 最近 RocketMQ 刚刚上生产环境,闲暇之时在这里做一些分享,主要目的是让初学者能快速上手RocketMQ. ...
- 电脑开机后多了OneKey Ghost启动选项怎么解决
原文地址:http://www.xitongcheng.com/jiaocheng/dnrj_article_18745.html 大多数用户在使用OneKey Ghost安装电脑系统后,会在开机启动 ...
- 记录 解决ubuntu16.04 ‘E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不可用) ’
当运行sudo apt-get install/update/其他命令时,会出现如下提示: E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不 ...
- python,读取txt的方法和应用
1.读取txt内的百度盘地址,循环保存到百度云中(直接访问下方地址) https://www.cnblogs.com/becks/p/11409467.html 2.读取txt内参数,循环执行查询,读 ...
- python读取文件使用相对路径的方法
场景描述: python传统的读取文件的方法,通过读取文件所在目录来读取文件,这样出现的问题是,如果文件变更了存储路径,那么就会读取失败导致报错 如下方脚本 def stepb(a):#写入txt f ...
- C语言 获取系统时间与睡眠时间函数
摘要: 以ms为单位,获取系统时间.睡眠或延迟时间函数的使用方法. #include<stdio.h> #include <time.h> #include <sys/t ...
- HTML中CSS引用——选择器的使用
一.元素选择器 1.书写格式:标记名{/*生命块*/} 2.所有与该标记匹配的元素,都将应用声明块中的规则 二.类选择器 1.书写格式:.类名{/*声明块*/} ...
- 利用geojson实现模型轨迹运动
直接上代码 var viewer = new Cesium.Viewer('cesiumContainer'); //Set the random number seed for consistent ...