Header.vue:38 [Vue Router warn]: No match found for location with path “/login”

vue3一个简单商城项目，填写路由后，使用路由跳转，出现了下面的错误：

Header.vue:38  [Vue Router warn]: No match found for location with path "/login"

这个报错主要是因为Vue Router 没有找到匹配的路径。

我的路由信息index.js如下：

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

import  {Login}  from '../components/Login.vue'
// 定义路由
const routes = [
    {
        path: '/',
        redirect: '/login', // 默认重定向到登录页面
    },
    {
        path: '/login',
        component: Login, // 这里指定了 Login 组件
    },
];

// 创建router实例
const router = createRouter({
    history: createWebHistory(),
    routes,
});
//对外暴露路由器
export default router

main.js中也做了相应的更改

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'; // 导入路由

const app = createApp(App)
app.use(router);
app.use(ElementPlus)

app.mount('#app')

一开始百思不得其解，后来通过查资料对比代码终于找到问题所在，问题路由信息中有个关于login的导入

import  {Login}  from '../components/Login.vue'

改成下面这样就是可以的

import  Login  from '../components/Login.vue'

使用大括号和不使用的主要区别：

• 使用大括号{}进行import时，你是在进行命名导入，这允许你从模块中导入特定的导出项。
  比如：import { sum, multiply } from ‘./utils’;
  
• 如果模块有一个默认的导出项，你可以不使用大括号直接导入它。

这个地方组件的导入不使用大括号来导入，取消这个导入就可以了。