Javascript 返回到以前工作的组件将显示白色页面

这几天我做了我的第一步，得到了一些组件，并使用它们来获得一个合适的脚手架

我将路由器的定义（

/router/index.js

）扩展如下：

import Vue from 'vue';
import Router from 'vue-router';

import Welcome from '@/components/Welcome';
import NewMails from '@/components/NewMails';
import Settings from '@/components/Settings';
import Bugreport from '@/components/Bugreport';


Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'welcome',
      component: Welcome,
    },
    {
      path: '/newmails',
      name: 'newmails',
      component: NewMails,
    },
    {
      path: '/settings',
      name: 'settings',
      component: Settings,
    },
    {
      path: '/bugreport',
      name: 'bugreport',
      component: Bugreport,
    },
  ],
});

<template>
  <section class="hero is-small is-info">
    <div class="hero-head">
      <nav class="navbar">
        <div class="navbar-brand">
          <span class="title is-3" style="margin: 10px 0 0 32px">Title</span>
        </div>
        <div class="navbar-menu">
          <div class="navbar-end">
            <router-link to="welcome" class="navbar-item" active-class="is-active">
              <span class="icon is-small"><i class="fa fa-home"></i></span>
            </router-link>
            <router-link to="newmails" class="navbar-item" active-class="is-active">
              <span class="icon is-small"><i class="fa fa-envelope-open"></i></span>
            </router-link>
            <router-link to="settings" class="navbar-item" active-class="is-active">
              <span class="icon is-small"><i class="fa fa-cogs"></i></span>
            </router-link>
            <router-link to="bugreport" class="navbar-item" active-class="is-active">
              <span class="icon is-small"><i class="fa fa-bug"></i></span>
            </router-link>
          </div>
        </div>
      </nav>
    </div>
  </section>
</template>

<script>
export default {

};
</script>

我构建了一个导航组件，如下所示：

import Vue from 'vue';
import Router from 'vue-router';

import Welcome from '@/components/Welcome';
import NewMails from '@/components/NewMails';
import Settings from '@/components/Settings';
import Bugreport from '@/components/Bugreport';


Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'welcome',
      component: Welcome,
    },
    {
      path: '/newmails',
      name: 'newmails',
      component: NewMails,
    },
    {
      path: '/settings',
      name: 'settings',
      component: Settings,
    },
    {
      path: '/bugreport',
      name: 'bugreport',
      component: Bugreport,
    },
  ],
});

<template>
  <section class="hero is-small is-info">
    <div class="hero-head">
      <nav class="navbar">
        <div class="navbar-brand">
          <span class="title is-3" style="margin: 10px 0 0 32px">Title</span>
        </div>
        <div class="navbar-menu">
          <div class="navbar-end">
            <router-link to="welcome" class="navbar-item" active-class="is-active">
              <span class="icon is-small"><i class="fa fa-home"></i></span>
            </router-link>
            <router-link to="newmails" class="navbar-item" active-class="is-active">
              <span class="icon is-small"><i class="fa fa-envelope-open"></i></span>
            </router-link>
            <router-link to="settings" class="navbar-item" active-class="is-active">
              <span class="icon is-small"><i class="fa fa-cogs"></i></span>
            </router-link>
            <router-link to="bugreport" class="navbar-item" active-class="is-active">
              <span class="icon is-small"><i class="fa fa-bug"></i></span>
            </router-link>
          </div>
        </div>
      </nav>
    </div>
  </section>
</template>

<script>
export default {

};
</script>

这是我能找到的唯一一张空白页

尽管在开发模式下运行，VueJs不会将任何错误消息记录到浏览器的控制台，这使得此时的调试有点麻烦。谷歌搜索会导致几个类似的问题，即当Vue呈现无效HTML时会出现空白页面。因此，我将故障部件与其他部件进行了比较，没有发现任何重大差异。此外，我还尝试通过采用路线定义来替换组件本身，例如：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'welcome',
      component: Settings,
    },
    {
      path: '/newmails',
      name: 'newmails',
      component: NewMails,
    },
    {
      path: '/settings',
      name: 'settings',
      component: Settings,
    },
    {
      path: '/bugreport',
      name: 'bugreport',
      component: Bugreport,
    },
  ],
});

这就产生了同样的效果。组件在第一次访问时正确渲染/注入，并且从另一个路由/视图/组件返回时会导致出现故障

---

既然所有其他路线都按要求运行，我在这里做错了什么？

您没有为

欢迎

指定路线，只为

/

指定路线

那么为什么

应该做些什么呢

以下是一些提示：

-使用重定向或别名修复您的

欢迎

路由问题

我推荐一个别名

别名/a as/b表示当用户访问/b时，URL保持不变 /b、 但它将被匹配，就像用户正在访问/a一样

-在

原因是，如果您处于类似于

/welcome/home/dad

的嵌套路由中，并且您单击

，它将路由到

/welcome/home/newmail

，而不是

/newmail

---

-最后，如果您使用的是vue路由器，并且您曾经看到过

，那么它很可能是一条不匹配的路由。

您没有为

欢迎

指定路由，仅为

/

指定路由

那么为什么

应该做些什么呢

以下是一些提示：

-使用重定向或别名修复您的

欢迎

路由问题

我推荐一个别名

别名/a as/b表示当用户访问/b时，URL保持不变 /b、 但它将被匹配，就像用户正在访问/a一样

-在

原因是，如果您处于类似于

/welcome/home/dad

的嵌套路由中，并且您单击

，它将路由到

/welcome/home/newmail

，而不是

/newmail

---

-最后，如果您使用的是vue路由器，并且您曾经看到过

，那么它很可能是一个不匹配的路由。

您确实可以使用命名路由，但语法不同（请注意

到

之前的冒号）

欢迎您

---

Ref:

您确实可以使用命名路由，但语法不同（请注意

to

前面的冒号）

欢迎您

---

参考：

您如何导航回

欢迎路线？您是手动更改地址栏中的URL还是单击路由器链接？@Phil:是的，这正是我想要做的。但是，将and与a组合会产生所需的行为。您如何导航回
欢迎
路线？您是手动更改地址栏中的URL还是单击路由器链接？@Phil:是的，这正是我想要做的。但是，与a结合会产生所需的行为。
<router-link to="/newmails">

<router-link :to="{ name: 'welcome'}">Welcome</router-link>