Question

这些天使用VueJs执行我的第一步，并使用vue-router启动并运行了一些组件以获得正确的脚手架。

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

如您所见，通过路由器使用vue-cli在不同视图之间导航。

加载应用程序时，会激活/路由，并根据需要将Welcome组件注入DOM。此外，还可以在newmails，settings和bugreport视图之间切换。组件工作得很好。

但是，当再次尝试在welcome路径上打开/路径时，不会正确注入所需的组件。而不是我在初始看同一个组件时能看到的内容，我只得到一个白色/空白页面。

检查应用程序的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,
    },
  ],
});

字面上会产生相同的效果。组件在首次访问时正确呈现/注入，并在从另一个路径/视图/组件返回时导致错误。

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

Answer 1

您尚未为welcome指定路线，仅适用于/。

那么<router-link to="welcome">为什么要做任何事情呢？

以下是一些提示：

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

我推荐别名。

/ a as / b的别名表示当用户访问/ b时，URL仍然存在 / b，但它将匹配，就好像用户正在访问/ 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

回到以前工作的组件会显示白页

2 个答案: