Vuejs Simple Navigation Menu vue router-link params

Vuejs Simple Navigation Menu vue router-link params

In this Post We Will Explain About is Vuejs Simple Navigation Menu vue router-link params With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs menu bar with submenu example

In this post we will show you Best way to implement Vuejs navbar example, hear for How to Vuejs menu bar with submenu example with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Navigation vuejs Dynemic Navigation menu example

index.html

<div id="liveApp">
    <nav>
        <a href="#" class="home">Home</a>
        <a href="#" class="portfolio">Portfolio</a>
        <a href="#" class="aboutus">About Us</a>
        <a href="#" class="contact">Contact</a>
    </nav>
    <p>You Selected <b>{{liveactive}}</b></p>
</div>

index.js

var demo = new Vue({
    el: '#liveApp',
    data: {
        liveactive: 'home'
    },
    methods: {
        addActive: function(item){
            this.liveactive = item;
        }
    }
});

CSS – style.css

*{
    margin:0;
    padding:0;
}
a:hover{
    text-decoration:none;
}

a, a:visited {
    outline:none;
    color:#389dc1;
}


nav{
    display:inline-block;
    margin:50px auto 40px;
    background-color:#5597b4;
    box-shadow:0 1px 1px #ccc;
    border-radius:2px;
}

nav a{
    display:inline-block;
    padding: 15px 35px;
    color:#fff !important;
    font-weight:bold;
    font-size:16px;
    text-decoration:none !important;
    line-height:1;
    text-transform: uppercase;
    background-color:transparent;

    -webkit-transition:background-color 0.25s;
    -moz-transition:background-color 0.25s;
    transition:background-color 0.25s;
}
p{
    font-size:22px;
    font-weight:bold;
    color:#7d9098;
}

p b{
    color:#ffffff;
    display:inline-block;
    padding:5px 10px;
    background-color:#c4d7e0;
    border-radius:2px;
    text-transform:uppercase;
    font-size:18px;
}
nav a:first-child{
    border-radius:2px 0 0 2px;
}

nav a:last-child{
    border-radius:0 2px 2px 0;
}

nav.home .home,
nav.portfolio .portfolio,
nav.aboutus .aboutus,
nav.contact .contact{
    background-color:#e35885;
}

Example

I hope you have Got navigation vuejs dynemic navigation menu example And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.