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 相关文章推荐
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
js监听html页面的上下滚动事件方法
Sep 11 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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安全配置详细说明
2011/09/26 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
Vue渲染函数详解
2017/09/15 Javascript
JS判断数组那点事
2017/10/10 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python Cartopy的基础使用详解
2020/11/01 Python
运动会广播稿300字
2014/01/10 职场文书
经典促销广告词大全
2014/03/19 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
小数乘法教学反思
2016/02/22 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis