I want to do
if the child route is open I want to give class="user" margin-right:200px and I want to use transition while doing this. I also want transition to be done when I turn off the router.
This Is The Route I Have
[
{
path: 'user',
component: () => import('../pages/User/User.vue'),
name: 'user',
children: [
{
path: 'new',
component: () => import('../pages/User/UserNew.vue'),
name: 'userNew',
},
]
}
]
User.vue
<template>
<div class="main">
<div class="user">Hello JACK
<router-link :to="{ name: 'userNew'}">
<span>Add User</span>
</router-link>
</div>
<div class="Form">
<router-view v-slot="{ Component }">
<transition name="route">
<component :is="Component"/>
</transition>
</router-view>
</div>
</div>
</template>
<script>
export default {
name: "User"
}
</script>
UserNew.vue
<template>
<div class="">
<button @click="this.$router.go(-1)">Close</button>
<form action="">
<label for="email">Email</label>
<input type="email" id="email">
</form>
</div>
</template>
<script>
export default {
name: "UserNew"
}
</script>
