Vue Router-View 没有显示 Link 的 Component

1. 简介

Vue Router 是 Vue.js 官方提供的一款路由管理器，可以让我们在 Vue.js 单页应用中实现页面的跳转和切换。其中 router-view 组件用于渲染匹配的路由组件，router-link 组件用于实现页面间的跳转。然而，有时候我们可能会遇到 router-view 组件没有显示 router-link 组件对应的页面的情况，本文将详细解释可能的原因和解决方法。

2. 原因分析

2.1. 检查是否正确配置了路由

首先，我们需要确保正确配置了路由。在 Vue Router 中，我们需要创建一个路由实例，并将其挂载到 Vue 根实例上。我们需要定义路由表，包括每个路由对应的路径和组件。在定义完路由表后，还需要使用 Vue.use 注册路由实例，并在 Vue 的根模板中使用 router-view 组件渲染对应的路由组件。

下面是一个简单的示例代码：

// 路由配置
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

// Vue 根实例
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

在上述代码中，我们首先导入 VueRouter 并使用 Vue.use 注册路由实例。然后，我们定义了路由表 routes，其中包括了根路径 / 对应的 Home 组件和 /about 对应的 About 组件。接着，我们使用 new VueRouter() 创建了路由实例，并将路由表传入其中。最后，我们将路由实例挂载到 Vue 的根实例中，并使用 router-view 组件渲染对应的路由组件。

如果我们没有正确配置路由，就会导致 router-view 组件无法显示 router-link 组件对应的页面。因此，首先要检查是否正确配置了路由，并确保路径和组件的对应关系正确。

2.2. 检查是否正确使用了 `router-link` 组件

如果路由配置正确，但 router-view 仍然没有显示 router-link 组件对应的页面，那么问题很可能出在 router-link 组件的使用上。下面是一些可能导致问题的常见错误：

忘记使用 router-link 组件进行页面跳转：在需要跳转的地方，需要使用 router-link 组件来包裹，指定跳转的路径，并设置跳转的内容，例如：
```
<router-link to="/about">关于</router-link>
```
router-link 中的路径错误：如果 router-link 的路径不正确，那么点击它也不会导航到对应的页面。请仔细检查路径是否正确。
router-link 中的路径参数错误：如果需要使用路径参数进行页面跳转，那么需要在路径中使用动态绑定。例如，想要根据不同的 id 跳转到不同的用户页面，可以这样写：
```
<router-link :to="'/user/' + userId">用户详情</router-link>
```

确保以上使用 router-link 组件的时候没有出现以上错误，还是无法显示页面，则需要继续进行以下的排查。

2.3. 检查是否正确使用了 `router-link` 的 `tag` 属性

在一些情况下，我们可能会使用自定义的标签来包裹 router-link，而不是使用默认的 <a> 标签。例如，我们希望使用 <button> 标签进行导航，可以这样写：

<router-link to="/about" tag="button">关于</router-link>

然而，如果我们使用的自定义标签没有设置正确的点击事件，就不能触发导航。在这种情况下，router-link 组件可能不会显示页面。请确保自定义标签设置了正确的点击事件，并能够实现导航功能。

2.4. 检查是否设置了路由的 `name`

在路由配置中，我们可以给每个路由设置一个独一无二的 name。这个 name 可以作为 router-link 组件的 to 属性的值，用于跳转到对应的路由。

例如，在路由配置中设置了名为 About 的路由，并给它设置了 name：

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

我们可以使用这个 name 来指定 router-link 的 to 属性：

<router-link :to="{ name: 'About' }">关于</router-link>

如果没有设置路由的 name 或者 name 设置不正确，router-link 组件可能无法正确导航。只有在路由配置中正确设置了 name 并且 router-link 的 to 属性指向正确的 name，才能正常显示对应的页面。

2.5. 检查是否正确使用了路由的嵌套

在使用 Vue Router 进行路由管理时，可能会涉及到路由的嵌套使用。例如，在一个父路由下嵌套了多个子路由，在使用 router-view 渲染子路由组件时，如果没有正确设置嵌套路由的相关配置，可能会导致 router-view 不显示。

在路由配置中，我们可以使用 children 属性来配置子路由。下面是一个示例：

const routes = [
  {
    path: '/parent',
    name: 'Parent',
    component: Parent,
    children: [
      {
        path: 'child',
        name: 'Child',
        component: Child
      }
    ]
  }
];

在上述代码中，我们定义了一个父路由 /parent，它包含一个子路由 /parent/child。如果我们在父组件中使用了 router-view 来渲染子组件，但没有正确设置嵌套路由的相关配置，就可能导致子组件不显示。

在父组件的模板中，我们需要使用 <router-view></router-view> 来渲染子路由组件。对于嵌套路由，我们还需要在父组件的 name 属性指定嵌套的命名视图。示例如下：

<template>
  <div>
    <h1>父组件</h1>
    <router-view name="child"></router-view>
  </div>
</template>

在上述代码中，我们在 <router-view> 组件中使用 name 属性指定了嵌套的命名视图为 child。这样，Vue Router 才能正确地渲染子路由组件。

如果没有正确设置嵌套路由的相关配置，可能会导致子组件不显示。请确保在父组件的模板中使用了 name 属性来指定命名视图，并正确设置了子路由的配置。

2.6. 检查是否使用了嵌套路由的 `<keep-alive>` 组件

如果在嵌套路由中使用了 <keep-alive> 组件来缓存视图，可能会导致子组件不会重新渲染，从而影响 router-view 的显示。

在使用 <keep-alive> 组件时，需要注意以下几点：

确保在 <router-view> 上面使用了 <keep-alive> 组件：例如，在父组件的模板中，确保 <keep-alive> 组件位于 <router-view> 上方。
使用 include 和 exclude 属性限制缓存的组件范围：如果想要指定哪些组件需要缓存，可以使用 include 属性指定需要缓存的组件，使用 exclude 属性指定不需要缓存的组件。
使用 router-view 的 key 属性强制重新渲染：如果想要在每次路由切换时强制重新渲染组件，可以在 <router-view> 上设置 key 属性，并将其绑定到某个唯一的标识符。