Header.js File
Jump to navigation
Jump to search
<template> // The "exact' keyword is an exact match for the path used for active style, otherwise the home would not be deselected when you click user <div id="nav"> <ul> <router-link to="/" tag="li" active-class="active" exact> <a>Home</a> </router-link> <router-link to="/user" tag="li" active-class="active"> <a>User1</a> </router-link> <router-link to="/user">User</router-link> </ul> </div> </template> <script> export default { } </script> <style> #nav { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; padding: 10px; } a { color: #b96442; } .active{ background-color:#42b983; } </style>