纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vue tab路由切换组件 vue实现tab路由切换组件的方法实例

禁花   2021-05-07 我要评论
想了解vue实现tab路由切换组件的方法实例的相关内容吗,禁花在本文为您仔细讲解vue tab路由切换组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,tab路由切换组件,vue,tab路由切换,vue中的路由跳转,下面大家一起来学习吧。

前言

本文介绍的是使用vue自带的vue-router.js路由实现分页切换功能,下面话不多说了,来一起看看详细的实现代码吧

实现图片如下

下列为实现代码

css:

*{
            margin: 0;
            padding: 0;
        }
        #app ul{
            width: 300px;
            height: 30px;
            list-style: none;
        }
        #app>ul>li{
            width: 100px;
            height: 30px;
            float: left;
        }

html:

<div id="app">
    <ul>
        <li>
            <router-link to="/dyy">第一页</router-link>
        </li>
        <li>
            <router-link to="/dey">第二页</router-link>
        </li>
        <li>
            <router-link to="/dsy">第三页</router-link>
        </li>
    </ul>
    <router-view></router-view>
</div>
 
<template id="DyyDay">
    <div>
        <ul>
            <li>News 01</li>
            <li>News 02</li>
            <li>News 03</li>
        </ul>
    </div>
</template>
 
<template id="DeyDay">
    <div>
        <ul>
            <li>message 01</li>
            <li>message 02</li>
            <li>message 03</li>
        </ul>
    </div>
</template>
 
<template id="DsyDay">
    <div>
        <h1>Home</h1>
        <router-link to="/dsy/home1">home1</router-link>
        <router-link to="/dsy/home2">home2</router-link>
        <router-view></router-view>
    </div>
</template>
 
<template id="home1">
    <h1>我是home1</h1>
</template>
 
<template id="home2">
    <h1>我是home2</h1>
</template>

js.

let Dyy={template:`#DyyDay`};
    let Dey={template:`#DeyDay`};
    let Dsy={template:`#DsyDay`};
    let home1={template:`#home1`};
    let home2={template:`#home2`};
    let router=new VueRouter({
        routes:[
            { path:'/',redirect:"dyy" },
            { path:'/dyy',component:Dyy },
            { path:'/dey',component:Dey },
            { path:'/dsy',component:Dsy ,
                children:[
                    {path:'/dsy/home1',component:home1},
                    {path:'/dsy/home2',component:home2}
                ]
            }]
    });
    let app=new Vue({
        router
    }).$mount('#app')

总结


相关文章

猜您喜欢

  • vue tab切换方式 vue实现tab切换的3种方式及切换保持数据状态

    想了解vue实现tab切换的3种方式及切换保持数据状态的相关内容吗,itmonkey-cn在本文为您仔细讲解vue tab切换方式的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,tab切换,vue,tab组件,tab切换前端实现,下面大家一起来学习吧。..
  • 优化图片提高网站性能 图片该怎样优化来提高网站性能

    想了解图片该怎样优化来提高网站性能的相关内容吗,浅笑·在本文为您仔细讲解优化图片提高网站性能的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JS,优化图片,JS,网站性能,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.hao45.cc 【好下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式