Is it possible to restrict router-view to display content from only one specific page?
App.vue
<div id="app">
<div class="out-page" v-if="$route.path === '/login'">
<router-view name="login"></router-view>
</div>
<div class="register-page" v-if="$route.path === '/register'">
<div class="register-wrapper">
<router-view name="register"></router-view>
</div>
</div>
<div class="in-page" v-if="$route.path === '/home'">
<div class="home-container>
<router-view name="home"></router-view>
</div>
</div>
</div>
router.js
export default new Router({
mode: "history",
routes: [
{
path: "/login",
name: "login",
component: () =>
import(/* webpackChunkName: "Login" */ "./pages/login.vue")
},
{
path: "/register",
name: "register",
component: () =>
import(/* webpackChunkName: "Register" */ "./pages/register.vue")
},
{
path: "/home",
name: "home",
component: () =>
import(/* webpackChunkName: "Home" */ "./pages/home.vue")
}
]
});
Is there a way for the router-view to exclusively show content from just one specific page and not all of them, even when using the name attribute?
Any suggestions on how to achieve this?