Как получить дочернее монтирование для запуска сначала в асинхронной загрузке компонентов vue-router? - PullRequest
Новая
       22

Как получить дочернее монтирование для запуска сначала в асинхронной загрузке компонентов vue-router?

0 голосов
/ 29 апреля 2019

Я использую vue / vue-router для загрузки сайта.Это код, который демонстрирует проблему. 

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
        <script src="https://unpkg.com/vue"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js"></script>
    </head>
    <body>
        <div id="app">
            <router-view></router-view>
        </div>
        <script>
            Vue.component('a-a', function(resolve, reject) {
                setTimeout(function() {
                    resolve({
                        template : "<div>A</div>",
                        mounted : function() {
                            alert(1);
                        }
                    });
                }, 2000);
            });
            new Vue({
                el: '#app',
                router : new VueRouter({
                    mode: 'history',
                    routes: [
                        { path: '/foo', component: Vue.component("a-a") }
                    ]
                }),
                mounted : function() {
                    alert(2);
                }
            });
        </script>
    </body>
</html>

Я изменил IIS, чтобы разрешить ссылкам в стиле REST возвращать вышеуказанную страницу следующим образом 

<rewrite>
  <rules>
    <rule name="SPA Routes" stopProcessing="true">
      <!-- match everything by default -->
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <!-- unless its a file -->
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <!-- or a directory -->
        <!--<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />-->
        <!-- or is under the /api directory -->
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
        <!-- list other routes or route prefixes here if you need to handle them server side -->
      </conditions>
      <!-- rewrite it to /index.html -->
      <action type="Rewrite" url="App/test2.html" />
    </rule>
  </rules>
</rewrite>

При посещении страницы я используюссылка /App/test2.html/foo, и она возвращает страницу выше.

Затем я ожидаю, что vue-router загрузит компонент на основе пути URL, затем асинхронно загрузит компонент, ожидая функции разрешения, затемзапустите смонтированную функцию на дочернем элементе, а затем, наконец, запустите смонтированную функцию на родительском объекте.Таким образом, в основном оповещение 1, а затем 2. Но родитель предупреждает вначале, поэтому он делает 2, а затем 1.

Как я могу заставить ребенка смонтировать сначала?

Спасибо

...