回到以前工作的组件会出现白页

Question

用 VueJs these days and got vue-router and some components up and running using vue-cli 做我的第一步以获得合适的脚手架。

我扩展了路由器的定义（./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>

如您所见，在不同视图之间导航是通过路由器使用其 router-link element.

完成的

加载应用程序时，/ 路由被激活，Welcome 组件根据需要注入到 DOM。除了在 newmails、settings 和 bugreport 视图之间切换。组件工作得很好。

但是，当再次尝试打开 / 路径上的 welcome 路由时，所需的组件没有正确注入。我只看到了 white/blank 页面，而不是我最初查看同一组件时能够看到的内容。

检查应用程序的 DOM 表明未注入组件的内容，而是

<div id="app"><!----></div>

我得到的就是提到的空白页。

尽管运行在开发模式下，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,
    },
  ],
});

这实际上会产生相同的效果。该组件在第一次访问时 rendered/injected 正确，从另一个 route/view/component.

返回时导致错误 

我在这里做错了什么，因为所有其他路线都按预期工作？

Answer 1

您没有为 welcome 指定路线，只为 / 指定路线。

那么为什么 <router-link to="welcome"> 应该做些什么呢？

这里有一些提示：

-使用重定向或别名来修复您的 welcome 路由问题。 https://router.vuejs.org/en/essentials/redirect-and-alias.html。

我推荐一个别名。

An alias of /a as /b means when the user visits /b, the URL remains /b, but it will be matched as if the user is visiting /a.

{
  path: '/',
  name: 'welcome',
  component: Settings,
  alias: '/welcome'
}

-在 <router-links>

中使用绝对路径而不是相对路径

<router-link to="/newmails">

原因是，如果您在 /welcome/home/dad 这样的嵌套路由中并单击 <router-link to="newmails">，它将路由到 /welcome/home/newmails 而不是 /newmails

-最后，如果您使用的是 vue-router 并且您曾经看到 <div id="app"></div>，那很可能是一条不匹配的路由。

Answer 2

您确实可以使用命名路由，但语法不同（注意 to 之前的冒号）。

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

参考：Vue Named Routes

回到以前工作的组件会出现白页

Going back to previously working component gives white page

javascript

vue.js

vue-router

vue-component

vuejs2