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

更新时间：2019年07月24日 10:35:01 作者：乐码乐

这篇文章主要为大家详细介绍了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>

如有错误之处，欢迎指出，万分感谢！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue生态的新成员Pinia的详细介绍
本文主要介绍了Vue生态的新成员Pinia的详细介绍，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
vue+elementUI组件table实现前端分页功能
这篇文章主要为大家详细介绍了vue+elementUI组件table实现前端分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
Vue Promise的axios请求封装详解
这篇文章主要介绍了Vue Promise的axios请求封装详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
Vue列表页渲染优化详解
这篇文章主要为大家详细介绍了Vue列表页渲染优化的操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
Vue中使用video.js实现截图和视频录制与下载
这篇文章主要为大家详细介绍了Vue中如何使用video.js实现截图和视频录制与下载,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-03-03
Vue父子组件之间事件通信示例解析
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2023-03-03
Vue 自定义指令实现一键 Copy功能
指令 (Directives) 是带有 v- 前缀的特殊特性。这篇文章主要介绍了Vue 自定义指令实现一键 Copy的功能,需要的朋友可以参考下
2019-09-09
关于vue的npm run dev和npm run build的区别介绍
这篇文章主要介绍了关于vue的npm run dev和npm run build的区别介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
Vue.js 和 MVVM 的注意事项
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，Vue.js 是一个提供 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。这篇文章给大家介绍Vue.js 和 MVVM 的注意事项，感兴趣的朋友一起看看吧
2016-11-11
Vue.js路由vue-router使用方法详解
这篇文章主要为大家详细介绍了Vue.js路由vue-router使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具