第一步:搭建环境

安装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切换的更多相关文章

  1. vue.cli实现tab切换效果

    <template> <div class="cp-select">                     <div class="lef ...

  2. 六、vue路由Vue Router

    一.基本概念 route, routes, router 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮  => home内容, 这是一条route,  a ...

  3. vue实现tab切换功能

    最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...

  4. vue + element-ui 制作tab切换(切换vue组件,踩坑总结)

    本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...

  5. (vue.js)Vue element tab 每个tab用一个路由来管理?

    (vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词:   关于网友提出的“ (vue.js) ...

  6. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

  7. VUE 实现tab切换页面效果

    一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)

    本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...

  9. vue实现tab切换

    需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. PageHelper踩坑

    刚开始死活分不了页,只显示默认的前 10条.搞了一下午,打了无数个断点都试不出毛病在哪. 下班又死磕到快8点,就在我已经绝望的时候,最后终于试出来了,把page.getTotal()给传到前端就好了. ...

  2. 异数OS 织梦师-水母(一)--消息队列篇

    异数OS 织梦师-水母(一)–消息队列篇 本文来自异数OS社区 github: https://github.com/yds086/HereticOS 异数OS社区QQ群: 652455784 异数O ...

  3. RocketMQ 实战之快速入门

    原文地址:https://www.jianshu.com/p/824066d70da8 最近 RocketMQ 刚刚上生产环境,闲暇之时在这里做一些分享,主要目的是让初学者能快速上手RocketMQ. ...

  4. 电脑开机后多了OneKey Ghost启动选项怎么解决

    原文地址:http://www.xitongcheng.com/jiaocheng/dnrj_article_18745.html 大多数用户在使用OneKey Ghost安装电脑系统后,会在开机启动 ...

  5. 记录 解决ubuntu16.04 ‘E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不可用) ’

    当运行sudo apt-get install/update/其他命令时,会出现如下提示: E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不 ...

  6. python,读取txt的方法和应用

    1.读取txt内的百度盘地址,循环保存到百度云中(直接访问下方地址) https://www.cnblogs.com/becks/p/11409467.html 2.读取txt内参数,循环执行查询,读 ...

  7. python读取文件使用相对路径的方法

    场景描述: python传统的读取文件的方法,通过读取文件所在目录来读取文件,这样出现的问题是,如果文件变更了存储路径,那么就会读取失败导致报错 如下方脚本 def stepb(a):#写入txt f ...

  8. C语言 获取系统时间与睡眠时间函数

    摘要: 以ms为单位,获取系统时间.睡眠或延迟时间函数的使用方法. #include<stdio.h> #include <time.h> #include <sys/t ...

  9. HTML中CSS引用——选择器的使用

    一.元素选择器     1.书写格式:标记名{/*生命块*/}     2.所有与该标记匹配的元素,都将应用声明块中的规则 二.类选择器     1.书写格式:.类名{/*声明块*/}         ...

  10. 利用geojson实现模型轨迹运动

    直接上代码 var viewer = new Cesium.Viewer('cesiumContainer'); //Set the random number seed for consistent ...