Add active status to route links
This commit is contained in:
parent
83a111bb9a
commit
5780809aa5
10
src/App.vue
10
src/App.vue
|
@ -9,8 +9,8 @@
|
|||
|
||||
<div class="max-w-2xl mx-auto mt-6">
|
||||
<span class="ml-2" v-for="route in routes" :key="route.path">
|
||||
<router-link class="inline-block px-3 py-1 rounded text-sm font-medium bg-gray-200 text-gray-700 cursor-pointer hover:bg-gray-700 hover:text-gray-200" :to="route.path">
|
||||
{{route.name}}
|
||||
<router-link class="inline-block px-3 py-1 rounded text-sm font-medium cursor-pointer hover:bg-gray-700 hover:text-gray-200" :class="currentPage == route.path ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'" :to="route.path">
|
||||
{{ route.name }}
|
||||
</router-link>
|
||||
</span>
|
||||
</div>
|
||||
|
@ -40,6 +40,12 @@ export default {
|
|||
BackToTop
|
||||
},
|
||||
|
||||
computed: {
|
||||
currentPage() {
|
||||
return this.$route.path;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
routes: this.$router.options.routes,
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -11,6 +11,7 @@ const Forms = () =>
|
|||
|
||||
|
||||
export default new VueRouter({
|
||||
mode: 'history',
|
||||
routes: [
|
||||
// { path: '/', redirect: '/alerts' },
|
||||
{ path: "/alerts", component: Alerts, name: "Alerts" },
|
||||
|
|
Loading…
Reference in a new issue