Question about whether pushState is true or false

Questions
1

This is my code, and the effect I want to achieve is: tab multiview layout initialization page. The problem I’m having is now that the pushState interface is blank when it is true. If the pushState is false, the interface can be loaded normally, but without history, the return key on Android cannot return to the previous page!

 <div class="views tabs">
            <div class="toolbar tabbar-labels weihuan-toolbar-main">
                <div class="toolbar-inner">
                    <a href="#view-home" class="tab-link tab-link-active">
                        <i class="icon iconfont weihuan-home_light"></i>
                        <span class="tabbar-label">首页</span>
                    </a>

                    <a href="#view-notice" class="tab-link">
                        <i class="icon iconfont weihuan-xiaoxizhongxin">
                            <span class="badge color-red">15</span>
                        </i>
                        <span class="tabbar-label">消息</span>
                    </a>

                    <a class="tab-link link" id="weihuan-publish">
                        <i class="icon iconfont weihuan-yuan_quan"></i>
                    </a>

                    <a href="#view-find" class="tab-link">
                        <i class="icon iconfont weihuan-zhinanzhen1"></i>
                        <span class="tabbar-label">发现</span>
                    </a>

                    <a href="#view-mine" class="tab-link">
                        <i class="icon iconfont weihuan-my_light"></i>
                        <span class="tabbar-label">我的</span>
                    </a>

                </div>
            </div>


            <div id="view-home" class="view view-main tab tab-active">
            </div>

            <div id="view-notice" class="view tab">
            </div>

            <div id="view-find" class="view tab">
            </div>

            <div id="view-mine" class="view tab ">

            </div>

        </div>

var homeView = app.views.create("#view-home", {
  pushState: true
});
var noticeView = app.views.create("#view-notice", {});
var findView = app.views.create("#view-find", {
  url: "/find/",
  name: "find",
  main: true,
  pushState: false,
  main: true,
  history: true,
  pushStateRoot: "/"
});
var mineView = app.views.create("#view-mine", {
  url: "/mine/",
  name: "mine",
  pushState: true,
  history: true,
  pushStateRoot: "/",
  routes: [
    {
      name: "mine",
      path: "/mine/",
      component: "./mine.html"
    }
  ]
});
2

Maybe the above js code is not clear enough, I posted a screenshot here！

image
image.png715×902 52.4 KB

3

It will work better if pushState is enabled only on single view. Your home view doesn’t have any default url specified. If it is empty then it can’t find the related route

4

Hello, my homepage view is normal, because I’m writing content in the tab content. What I want to do now is to rewrite the contents of the tab view. In an initialized way, I tested mineView and findmineView. After testing pushState:false in findmineView, the findmineView interface will be displayed normally, but the interface of pushState:true in mineView will be blank.

5

Maybe I didn’t understand enough. Can you write an example? An example of tab multiview initialization, and pushState: true

6
  • PushState will work only on one View-Tab
  • When PushState is enabled then what you have in url: '/mine/' will be overwritten with browser url. So if you have let say http://my-app.com/ when you load the app, then it will look and try to load route with / path. And looks like you doesn’t have such route for this view specified so you see it blank
7

Thank you, author. However, I still don’t quite understand that I urgently hope that the author can present a relevant case. I looked at the community and many people asked this question, but the real solution was not.

8

I dare to keep, my route is specifiedimage

9

I have defined a route js file separately, all routes are put in it.

10

Author, hello, can you solve my problem? F7 is really a good framework. Before that I used ionic, but I found that they are completely out of F7, so I spent a week To solve this problem, but now I really crash, because this problem is really too difficult!

11

I already said

When PushState is enabled then what you have in url: ‘/mine/’ will be overwritten with browser url. So if you have let say http://my-app.com/ when you load the app, then it will look and try to load route with / path. And looks like you doesn’t have such route for this view specified so you see it blank

Which means your url: '/mine/' will be ignored. Is it not clear?

12

image
image.png1202×779 57.7 KB

I tried what you said, but it’s still blank. I suggest you knock on a case

13

Ok, what do you think route’s path fields means?

14

It means that if view will request url with same path then it will load this route

15

But in pushState it will request what is in your browser url!!!

16

Do you have app opened on myapp.com/mine/? No. If you want it to be loaded when app opened in root host then it should be / in route path

17

No, I didn’t open it on what you said. I opened it on the root host.

image
image.png397×712 8.54 KB

18

image
image.png1243×867 30.3 KB

And I also noticed that in the debug panel there is no mine.html being loaded

19

It won’t be loaded because there is no /mine/ url in browser! As I said few times you need to set its view url to just / and its route path to / as well

20

I admit that I still did not understand, I am posting the code, you give me to make changes, let me see
url: “/mine/”,
name: “mine”,
pushState: true,
history: true,
pushStateRoot: “/”,
routes: [
{
name: “mine”,
path: “/mine/”,
url: “./pages/mine.html”
}
]