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

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

创新互联建站主营阳西网站建设的网络公司,主营网站建设方案,app开发定制,阳西h5小程序制作搭建,阳西网站营销推广欢迎阳西等地区企业咨询

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

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.所用样式

完整代码




  
  hello world
  
  

 

  
    
      html
      css
      vue
      javascript

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

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

分享文章：Vue.js路由实现选项卡简单实例
当前路径：http://cqcxhl.com/article/goeoss.html

重庆分公司，新征程启航

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

html

CSS

Vue

Javascript

其他资讯