CODEWITHSUNDEEP
vue.jsvuejs2vue-router
AbreQueVoy
AbreQueVoy

Reputation: 2316

Layout behavior when routing (Vue.js2)

I'm planning to have the following layout:

+-------------------------------------------------+
|                  HEADER (STATIC)                |
+-------------------------------------------------+
|         FOREWORD (just homepage; dynamic)       |
+-------------------------------------------------+
|                  BOOTSTRAP CARDS                |
|              with navigation links              |
|                    (dynamic)                    |
+-------------------------------------------------+

Since it's a Single Page App, I'm using Vue.js with routing to make sure everything gets displayed in the same view. However, trying various modifications to make the dynamic contents disappear and be replaced with a different page selected from the Bootstrap cards doesn't give results I'd like to achieve (links from cards and cards themselves don't disappear and the contents of destination links gets displayed in a spot where <router-view></router-view> is placed. I'd like the FOREWORD and BOOTSTRAP CARDS to be totally replaced by destination links).

Is there any dedicated way to achieve this? Or should I just manipulate with v-if and a show/hide flag defined in JS underneath to hide the dynamic contents when links from cards get selected?

Upvotes: 0

Views: 40

Answers (1)

Eric Guan
Eric Guan

Reputation: 15982

Setup "named views" - look in the official docs, or make the router-view component contain the foreword and the cards.

Glad you got it figured out.

Upvotes: 1

Related Questions