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

前端  /  管理员 发布于 4年前   498

本文实例为大家分享了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.所用样式

完整代码

           
    
      html      css      vue      javascript      
                     

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

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

您可能感兴趣的文章:

• 浅入深出Vue之自动化路由
• vue子路由跳转实现tab选项卡
• vue-router二级导航切换路由及高亮显示的实现方法
• Vue的路由及路由钩子函数的实现
• Vue 动态添加路由及生成菜单的方法示例
• Vue路由前后端设计总结