Vue implements the method example of tab routing switching component

Preface

This article introduces the use of vue-router.js routing that comes with vue to implement the paging switching function. Let's take a look at the detailed implementation code.

The implementation picture is as follows

The following is the implementation code

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">First page</router-link>
        </li>
        <li>
            <router-link to="/dey">Second page</router-link>
        </li>
        <li>
            <router-link to="/dsy">Page 3</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>I am home1</h1>
</template>
 
<template id="home2">
    <h1>I am 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')

Summarize

This is the end of this article about Vue's implementation of the tab routing switching component. For more related Vue tab routing switching component content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: