Vue.js路由实现选项卡简单实例


Posted in Javascript onJuly 24, 2019

本文实例为大家分享了Vue.js路由实现选项卡的具体代码,供大家参考,具体内容如下

需要实现下图效果,点击上方选项卡,切换到不同内容的组件:

Vue.js路由实现选项卡简单实例

事先准备好两个库文件(vue.js、vue-router.js),放到对应路径。

1.引入依赖库

<script src="vue.js" type="text/javascript" charset="GBK"></script>
<script src="vue-router.js" type="text/javascript" charset="GBK"></script>

2.组件创建

const Html = Vue.extend({
      template: '<div><h1>html</h1><p>{{msg}}</p></div>',
      data: function() {
        return {
          msg: 'This is the html vue-router.'
        }
      }
    });
    const Css = Vue.extend({
      template: '<div><h1>CSS</h1><p>{{msg}}</p></div>',
      data(){
       return{
       msg: 'This is the CSS vue-router.'
       }
      }
    });
    const Vue1 = Vue.extend({
      template: '<div><h1>Vue</h1><p>{{msg}}</p></div>',
      data(){
       return{
       msg: 'This is the Vue vue-router.'
       }
      }
    });
    const Javascript = Vue.extend({
      template: '<div><h1>Javascript</h1><p>{{msg}}</p></div>',
      data(){
       return{
       msg: 'This is the Javascript vue-router.'
       }
      }
    });

3.路由创建与映射

const router = new VueRouter({
     routes: [
      { path: '/html', component: Html },
       { path: '/css', component: Css },
       { path: '/vue', component: Vue1 },
       { path: '/javascript', component: Javascript },
       { path: '/', component: Html } //默认路径
     ] 
    });

4.挂在实例

const vm = new Vue({
       router: router 
    }).$mount('#app');

5.页面<router-link>,to指令跳转到指定路径

<div id="app">
    <div class="app-tit">
      <router-link to="/html">html</router-link>
      <router-link to="/css">css</router-link>
      <router-link to="/vue">vue</router-link>
      <router-link to="/javascript">javascript</router-link>
    </div>
  <div class="app-con">
     <router-view></router-view>
    </div>      
  </div>

6.所用样式

<style>
  body{
    font-family:"Microsoft YaHei";
  }
  #app{
    width: 600px;
    margin: 0 auto;
  }
  .app-tit{
    font-size: 0;
    width: 600px;
  }
  .app-tit .router-link-active {
   background: #09f;
    color: #fff;
  }
  .app-tit a{
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    width: 25%;
    text-align: center;
    background: #ccc;
    color: #333;
    text-decoration: none;
  }
  .app-con div{
    border: 1px solid #ccc;
    height: 400px;
    padding-top: 20px;
  }
  
</style>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="GBK">
  <title>hello world</title>
  <script src="vue.js" type="text/javascript" charset="GBK"></script>
  <script src="vue-router.js" type="text/javascript" charset="GBK"></script>
</head>
 <style>
  body{
    font-family:"Microsoft YaHei";
  }
  #app{
    width: 600px;
    margin: 0 auto;
  }
  .app-tit{
    font-size: 0;
    width: 600px;
  }
  .app-tit .router-link-active {
   background: #09f;
    color: #fff;
  }
  .app-tit a{
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    width: 25%;
    text-align: center;
    background: #ccc;
    color: #333;
    text-decoration: none;
  }
  .app-con div{
    border: 1px solid #ccc;
    height: 400px;
    padding-top: 20px;
  }
  
</style>
<body>
  <div id="app">
    <div class="app-tit">
      <router-link to="/html">html</router-link>
      <router-link to="/css">css</router-link>
      <router-link to="/vue">vue</router-link>
      <router-link to="/javascript">javascript</router-link>
    </div>
  <div class="app-con">
     <router-view></router-view>
    </div>      
  </div>
  
  <script type="text/javascript">
    const Html = Vue.extend({
      template: '<div><h1>html</h1><p>{{msg}}</p></div>',
      data: function() {
        return {
          msg: 'This is the html vue-router.'
        }
      }
    });
    const Css = Vue.extend({
      template: '<div><h1>CSS</h1><p>{{msg}}</p></div>',
      data(){
       return{
       msg: 'This is the CSS vue-router.'
       }
      }
    });
    const Vue1 = Vue.extend({
      template: '<div><h1>Vue</h1><p>{{msg}}</p></div>',
      data(){
       return{
       msg: 'This is the Vue vue-router.'
       }
      }
    });
    const Javascript = Vue.extend({
      template: '<div><h1>Javascript</h1><p>{{msg}}</p></div>',
      data(){
       return{
       msg: 'This is the Javascript vue-router.'
       }
      }
    });
    const router = new VueRouter({
     routes: [
      { path: '/html', component: Html },
       { path: '/css', component: Css },
       { path: '/vue', component: Vue1 },
       { path: '/javascript', component: Javascript },
       { path: '/', component: Html } //默认路径
     ] 
    });
    const vm = new Vue({
       router: router 
    }).$mount('#app');
  </script>
</body>
</html>

如有错误之处,欢迎指出,万分感谢!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
chrome调试javascript详解
Oct 21 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
使用zrender.js绘制体温单效果
Oct 31 Javascript
vue滚动tab跟随切换效果
Jun 29 #Javascript
Vue.js实现tab切换效果
Jul 24 #Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 #Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 #Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 #Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 #Javascript
javascript关于“时间”的一次探索
Jul 24 #Javascript
You might like
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
pandas参数设置的实用小技巧
2020/08/23 Python
python 如何快速复制序列
2020/09/07 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
python跨文件使用全局变量的实现
2020/11/17 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
酒店行政人事部经理职务说明书
2014/02/26 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书