<div> Template within routes[]

Questions
1

The main page of my app can have any one of 4 states so instead of having 4 different divs and going through the whole show/hide process, I was thinking of using the template function in routes.

Having read the docs, I still couldn’t figure out how to do what I want.

Basically, I want to use an API and get back something like this:

  <template>
    <div class="stuff">
        <div class="block block-strong text-align-center">
            <div class="preloader"></div>
        </div>
    </div>
  </template>
  <script>
    export stuffInit => {
      // here I will do something witht the server
      let user = null;  
    }
  </script>

Is this at all possible and if so, how?

2

not by design,
but if you insist => fervent-solomon-jqcd6s - CodeSandbox

3

Nice code!

When you say “not by design” are their any drawbacks I should be aware of?

4

performance (view/router is pretty musc heavy/expensive).
i never actually use it like this, so i can’t tell anymore.

probably “Custom Components” => Router Component | Framework7 Documentation,
is a better solution.

5

That makes sense that it would be. I’ll go read those docs.

Just as an FYI, the “states” are:

  1. checking for invitations,
  2. checking to see if an invitation was accepted (only if one were sent),
  3. answering a question,
  4. grading/ranking someone else’s answer,
  5. prompting the user to take a test.

3 & 4 can be done on one screen but I was really trying to avoid a bunch of screen hopping.