vue實現(xiàn)tab路由切換組件的方法實例

更新時間：2021年05月07日 09:05:52 作者：禁花

這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)tab路由切換組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

本文介紹的是使用vue自帶的vue-router.js路由實現(xiàn)分頁切換功能，下面話不多說了，來一起看看詳細的實現(xiàn)代碼吧

實現(xiàn)圖片如下

下列為實現(xiàn)代碼

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')

總結(jié)

到此這篇關(guān)于vue實現(xiàn)tab路由切換組件的文章就介紹到這了,更多相關(guān)vue tab路由切換組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: