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

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

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

事先准备好两个库文件（vue.js、vue-router.js），放到对应路径。

1.引入依赖库

2.组件创建

const Html = Vue.extend({
      template: 'html
{{msg}}
',
      data: function() {
 return {
   msg: 'This is the html vue-router.'
 }
      }
    });
    const Css = Vue.extend({
      template: 'CSS
{{msg}}
',
      data(){
return{
msg: 'This is the CSS vue-router.'
}
      }
    });
    const Vue1 = Vue.extend({
      template: 'Vue
{{msg}}
',
      data(){
return{
msg: 'This is the Vue vue-router.'
}
      }
    });
    const Javascript = Vue.extend({
      template: 'Javascript
{{msg}}
',
      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.页面，to指令跳转到指定路径

    
      html
      css
      vue
      javascript
    
  
     
   
  

6.所用样式

 
  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;
  }
  

完整代码

  
  
  
  

 
  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;
  }
  


  
    
      html
      css
      vue
      javascript
    
  
     
   
  
  
  

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

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