vue3-router路由问题解决方案

Router路由跳转失败的解决法案

第一类，配置问题

问题代码

import { createRouter, createWebHistory } from 'vue-router'

import HOME from "@/views/topic.vue"
import LoginIn from "@/components/LoginIn.vue";
import LoginUp from "@/components/LoginUp.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path : "/home",
      component : HOME
    },
    {
      path : "/",
      components : LoginIn
    },
    {
      path : "/LoginUp",
      components : LoginUp
    }
  ]
})

export default router

这一看，莫得很大问题，第一点没报错，第二点没有提示错误

然后我试着把第一个和第二个的path交换，发现，原来是下面两个要用components的问题，

只要把

components改为

component就可以了

原因是多一个S表示复数，由多个组件原件组成，少一个S表示单杀，单个组件原件即可