Aurelia，导航没有更新视口答案

【问题标题】：Aurelia, navigate is not updating viewportAurelia，导航没有更新视口
【发布时间】：2016-12-12 22:19:39
【问题描述】：

这行得通，然后我迁移到 webpack，现在不行了。值得注意的是，如果我在浏览器中刷新路由，内容就会显示出来。

这是我的app.html，当我从一个视图更改为另一个视图时，nav 应该会更新

<template>
    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="">RPF</a>
                </div>
                <router-view name="authn"></router-view>
            </div>
        </nav>
    </header>
    <div class="row container">
        <nav class="col-xs-3 col-md-2">
            <router-view name="nav"></router-view>
        </nav>

        <main id="content" class="container-fluid">
            <router-view name="content"></router-view>
        </main>
    </div>
</template>

和app.ts

import { Router, RouterConfiguration } from "aurelia-router";

export class App {
    private router: Router;

    configureRouter( config: RouterConfiguration, router: Router ): void {
        config.title = 'RPF';
        config.map( [
            {
                route: [ '', 'home' ],
                name: 'home',
                nav: false,
                viewPorts: {
                    content: { moduleId: 'main/home' },
                    authn: { moduleId: 'authn/login' },
                }
            },
            {
                route: 'manage-content',
                name: 'home',
                title: 'Manage Content',
                nav: true,
                viewPorts: {
                    content: { moduleId: 'main/home' },
                    authn: { moduleId: 'authn/logout' },
                    nav: { moduleId: 'main/nav' }
                }
            },
        ] );

        this.router = router;
    }
}

和main/nav.html

<template bindable="router">
    <ul class="nav nav-pills nav-stacked">
        <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
            <a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1.in"
               href.bind="row.href">${row.title}</a>
    </ul>
</template>

nav.ts

export class Nav {
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title><%- webpackConfig.metadata.title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="<%- webpackConfig.metadata.baseUrl %>">
    <!-- imported CSS are concatenated and added automatically -->
  </head>
  <body aurelia-app="main">
    <div class="splash">
      <div class="message"><%- webpackConfig.metadata.title %></div>
      <i class="fa fa-spinner fa-spin"></i>
    </div>
    <% if (webpackConfig.metadata.ENV === 'development') { %>
    <!-- Webpack Dev Server reload -->
    <script src="/webpack-dev-server.js"></script>
    <% } %>
  </body>
</html>

我没有从the skeleton更改配置

webpack.config.js

"use strict";

/**
 * To learn more about how to use Easy Webpack
 * Take a look at the README here: https://github.com/easy-webpack/core
 **/
const easyWebpack = require('@easy-webpack/core');
const generateConfig = easyWebpack.default;
const get = easyWebpack.get;
const path = require('path');
const ENV = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() || 'development';
let config;

// basic configuration:
const title = 'RPF';
const baseUrl = '/';
const rootDir = path.resolve();
const srcDir = path.resolve('src');
const outDir = path.resolve('dist');

const coreBundles = {
  bootstrap: [
    'aurelia-bootstrapper-webpack',
    'aurelia-polyfills',
    'aurelia-pal',
    'aurelia-pal-browser',
    'regenerator-runtime',
    'bluebird'
  ],
  // these will be included in the 'aurelia' bundle (except for the above bootstrap packages)
  aurelia: [
    'aurelia-bootstrapper-webpack',
    'aurelia-binding',
    'aurelia-dependency-injection',
    'aurelia-event-aggregator',
    'aurelia-framework',
    'aurelia-history',
    'aurelia-history-browser',
    'aurelia-loader',
    'aurelia-loader-webpack',
    'aurelia-logging',
    'aurelia-logging-console',
    'aurelia-metadata',
    'aurelia-pal',
    'aurelia-pal-browser',
    'aurelia-path',
    'aurelia-polyfills',
    'aurelia-route-recognizer',
    'aurelia-router',
    'aurelia-task-queue',
    'aurelia-templating',
    'aurelia-templating-binding',
    'aurelia-templating-router',
    'aurelia-templating-resources'
  ]
}

const baseConfig = {
  entry: {
    'app': [/* this is filled by the aurelia-webpack-plugin */],
    'aurelia-bootstrap': coreBundles.bootstrap,
    'aurelia': coreBundles.aurelia.filter(pkg => coreBundles.bootstrap.indexOf(pkg) === -1)
  },
  output: {
    path: outDir,
  }
}

// advanced configuration:
switch (ENV) {
  case 'production':
    config = generateConfig(
      baseConfig,

      require('@easy-webpack/config-env-production')
        ({compress: true}),

      require('@easy-webpack/config-aurelia')
        ({root: rootDir, src: srcDir, title: title, baseUrl: baseUrl}),

      require('@easy-webpack/config-typescript')(),
      require('@easy-webpack/config-html')(),

      require('@easy-webpack/config-css')
        ({ filename: 'styles.css', allChunks: true, sourceMap: false }),

      require('@easy-webpack/config-fonts-and-images')(),
      require('@easy-webpack/config-global-bluebird')(),
      require('@easy-webpack/config-global-jquery')(),
      require('@easy-webpack/config-global-regenerator')(),
      require('@easy-webpack/config-generate-index-html')
        ({minify: true}),

      require('@easy-webpack/config-common-chunks-simple')
        ({appChunkName: 'app', firstChunk: 'aurelia-bootstrap'}),

      require('@easy-webpack/config-copy-files')
        ({patterns: [{ from: 'favicon.ico', to: 'favicon.ico' }]}),

      require('@easy-webpack/config-uglify')
        ({debug: false})
    );
    break;

  case 'test':
    config = generateConfig(
      baseConfig,

      require('@easy-webpack/config-env-development')
        ({devtool: 'inline-source-map'}),

      require('@easy-webpack/config-aurelia')
        ({root: rootDir, src: srcDir, title: title, baseUrl: baseUrl}),

      require('@easy-webpack/config-typescript')
        ({ options: { doTypeCheck: true, compilerOptions: { sourceMap: true, inlineSourceMap: false } }}),

      require('@easy-webpack/config-html')(),

      require('@easy-webpack/config-css')
        ({ filename: 'styles.css', allChunks: true, sourceMap: false }),

      require('@easy-webpack/config-fonts-and-images')(),
      require('@easy-webpack/config-global-bluebird')(),
      require('@easy-webpack/config-global-jquery')(),
      require('@easy-webpack/config-global-regenerator')(),
      require('@easy-webpack/config-generate-index-html')(),

      require('@easy-webpack/config-test-coverage-istanbul')()
    );
    break;

  default:
  case 'development':
    process.env.NODE_ENV = 'development';
    config = generateConfig(
      baseConfig,

      require('@easy-webpack/config-env-development')(),

      require('@easy-webpack/config-aurelia')
        ({root: rootDir, src: srcDir, title: title, baseUrl: baseUrl}),

      require('@easy-webpack/config-typescript')(),
      require('@easy-webpack/config-html')(),

      require('@easy-webpack/config-css')
        ({ filename: 'styles.css', allChunks: true, sourceMap: false }),

      require('@easy-webpack/config-fonts-and-images')(),
      require('@easy-webpack/config-global-bluebird')(),
      require('@easy-webpack/config-global-jquery')(),
      require('@easy-webpack/config-global-regenerator')(),
      require('@easy-webpack/config-generate-index-html')
        ({minify: false}),

      require('@easy-webpack/config-copy-files')
        ({patterns: [{ from: 'favicon.ico', to: 'favicon.ico' }]}),

      require('@easy-webpack/config-common-chunks-simple')
        ({appChunkName: 'app', firstChunk: 'aurelia-bootstrap'})
    );
    break;
}

module.exports = config;

我看不出其中的任何一个实际上是如何损坏的，可能涉及另一个导致问题的文件，但我什么也没看到。

更新。我已经确定 aurelia 甚至没有尝试在加载时加载导航视图/模型。 canActivate 永远不会被调用，这就是控制台中记录的内容

DEBUG [function Login(am, router) {
        _classCallCheck(this, Login);

        this.am = am;
        this.router = router;
        this.log = _aureliaFramework.LogManager.getLogger(Login_1);
    }] navigating to manage-content
aurelia-logging-console.js:24 DEBUG [templating] importing resources for authn/logout.html

您会注意到“main/nav.html”明显缺少日志，但如果我直接进入该页面。

DEBUG [templating] importing resources for app.html []
aurelia-logging-console.js:24DEBUG [function Nav() {
        _classCallCheck(this, Nav);

        this.log = _aureliaFramework.LogManager.getLogger(Nav_1);
    }] can activate
aurelia-logging-console.js:24DEBUG [templating] importing resources for main/home.html []
aurelia-logging-console.js:24DEBUG [templating] importing resources for authn/logout.html []
aurelia-logging-console.js:24DEBUG [templating] importing resources for nav/nav.html []

【问题讨论】：

标签： typescript webpack aurelia

【解决方案1】：

所以我不明白为什么这种行为与aurelia-cli 到webpack 不同，但解决方案是这样的，这基本上是 webpack 中的路由器必须填充视图指定的所有键。所以我做了一个空的模板，

nullvm.html

<template></template>

nullvm.ts

export class NullVM {}

然后将其添加到路线的缺失部分。

export class App {
private router: Router;

configureRouter( config: RouterConfiguration, router: Router ): void {
    config.title = 'RPF';
    config.map( [
        {
            route: [ '', 'home' ],
            name: 'home',
            nav: false,
            viewPorts: {
                content: { moduleId: 'main/home' },
                authn: { moduleId: 'authn/login' },
                nav: { moduleId: 'main/nullvm' }
            }
        },
        {
            route: 'manage-content',
            name: 'home',
            title: 'Manage Content',
            nav: true,
            viewPorts: {
                content: { moduleId: 'main/home' },
                authn: { moduleId: 'authn/logout' },
                nav: { moduleId: 'main/nav' }
            }
        },
    ] );

    this.router = router;
}
}

【讨论】：