我的vue3项目子路由无法渲染，如何解决？(关键词-代码块)

Question

在进行vue路由学习的时候，我进行了路由嵌套，但是子路由一直渲染不出来，
这是嵌套的路由：router.js

      {
        path: '/tech',
        name: 'tech',
        component: tech,
      children:[
          {
              path: 'Phone',
              name:'Phone',
              compoent: Phone
          },
          {
              path: 'Wecat',
              name:'Wecat',
              compoent: Wecat
          }
      ]
      },

这是APP.vue

<template>
<div class="div01">
        <router-link to="/tech">科技</router-link>

    &nbsp;
    &nbsp;
    </div>

     <div><RouterView /></div>

这个是tech.vue

<template>
    <h1>这个是科技主页</h1>
    <div class="Login">
        <RouterLink to="/tech/Phone">手机注册</RouterLink>
        &nbsp
        <RouterLink to="/tech/Wecat">微信注册</RouterLink>
    </div>
</template>

然后这是效果图和报错：

请问为什么会这样呀？我该如何解决呢？

Answer 1

引自免费微信小程序：皆我百晓生

看起来你的Vue3项目中的子路由没有正确地被渲染。根据你提供的信息，我发现了几个可能的问题，并给出了相应的解决方案。

首先，确保你在main.js或入口文件中已经导入并使用了Vue Router。如果你还没有这样做，你需要添加以下代码到你的main.js:

import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  // ...你的路由配置
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

createApp(App).use(router).mount('#app');

接下来，检查你的组件名称拼写是否正确。在router.js中，有一个拼写错误：

compoent: Phone

应该是：

component: Phone

同样，在tech.vue中也有一个拼写错误：

<RouterLink to="/tech/Phone">手机注册</RouterLink>
<RouterLink to="/tech/Wecat">微信注册</RouterLink>

这里应该使用router-link而不是RouterLink（首字母小写）：

<router-link to="/tech/Phone">手机注册</router-link>
<router-link to="/tech/Wecat">微信注册</router-link>

现在，你应该在父组件tech.vue中看到子路由的导航链接。当点击这些链接时，对应的子组件应该会被渲染。如果仍然有问题，可能是其他部分的代码引起的。请确认所有组件都已经正确导入和注册。

如果你按照上述步骤修改后还是无法解决问题，可以尝试清除浏览器缓存，有时候浏览器缓存可能会导致一些看似奇怪的问题。如果问题依然存在，请提供更详细的错误信息，以便进一步排查。

下面是修复后的代码片段：

// router.js
import Phone from './Phone.vue';
import Wecat from './Wecat.vue';

const routes = [
  {
    path: '/tech',
    name: 'tech',
    component: () => import('./tech.vue'),
    children: [
      {
        path: 'Phone',
        name: 'Phone',
        component: () => import('./Phone.vue')
      },
      {
        path: 'Wecat',
        name: 'Wecat',
        component: () => import('./Wecat.vue')
      }
    ]
  }
];

export default routes;

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes'; // 引入上面的路由配置

const router = createRouter({
  history: createWebHistory(),
  routes
});

createApp(App).use(router).mount('#app');

<!-- tech.vue -->
<template>
  <h1>这个是科技主页</h1>
  <div class="Login">
    <router-link to="/tech/Phone">手机注册</router-link>
    &nbsp;
    <router-link to="/tech/Wecat">微信注册</router-link>
  </div>
</template>