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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
关于JS中prototype的理解
Sep 07 Javascript
基于jquery编写分页插件
Mar 07 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
ES6 Generator基本使用方法示例
Jun 06 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脚本的10个技巧(4)
2006/10/09 PHP
php递归列出所有文件和目录的代码
2008/09/10 PHP
php的一些小问题
2010/07/03 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
气象学专业个人求职信
2014/03/15 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
解放思想演讲稿
2014/09/11 职场文书
2014年售票员工作总结
2014/11/19 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
党员反邪教心得体会
2016/01/15 职场文书
高中语文教学反思范文
2016/02/16 职场文书
六年级情感作文之500字
2019/10/23 职场文书
详解SQL报错盲注
2022/07/23 SQL Server