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-resource jsonp跨域问题的解决方法
下面小编就为大家分享一篇基于vue-resource jsonp跨域问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue结合vant实现联动效果
这篇文章主要为大家详细介绍了vue结合vant实现联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
Vue vxe-table使用问题收录小结
这篇文章主要为大家介绍了Vue vxe-table使用问题收录小结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解
这篇文章主要介绍了Vue初学基础中的模板语法、数据绑定、Object.defineProperty方法等基础，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-09-09
vue 组件使用中的一些细节点
这篇文章主要介绍了vue 组件使用中的一些细节点，大概有两大细节点，本文通过基础实例给大家介绍的非常详细，需要的朋友参考下吧
2018-04-04
Vue3配置vite.config.js解决跨域问题的方法
跨域一般出现在开发阶段,由于线上环境前端代码被打包成了静态资源,因而不会出现跨域问题,这篇文章主要给大家介绍了关于Vue3配置vite.config.js解决跨域问题的相关资料,需要的朋友可以参考下
2024-07-07
浅谈Vue+Ant Design form表单的一些坑
本文主要介绍了浅谈Vue+Ant Design form表单的一些坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
vue清除动态路由的问题记录
项目中往往都是添加动态路由，如何删除已经添加进来的路由往往被忽视，为此这里做一下记录，感兴趣的朋友跟随小编一起看看吧
2023-10-10
Vite配置路径别名的简单实现方法
Vite项目中我们可以手动将src路径设置**@**路径别名,可以省下很多引入路径的冗余路径,下面这篇文章主要给大家介绍了关于Vite配置路径别名的简单实现方法,需要的朋友可以参考下
2023-04-04
vue页面使用js实现前端打印功能
这篇文章主要介绍了vue页面使用js实现前端打印功能,文中通过图文结合的方式给大家讲解的非常详细,对大家实现打印功能有一定的帮助,需要的朋友可以参考下
2024-05-05

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具