Vue2 configuration routing and problems encountered during operation

1、报错：export ‘default’ (imported as ‘VueRouter’) was not found in ‘vue-router’

Original code:

//引入插件
import Vue from 'vue';
import VueRouter from 'vue-router';

//使用插件
Vue.use(VueRouter);

//引入路由组件
import Home from '@/pages/Home';
import Login from '@/pages/Login';
import Register from '@/pages/Register';
import Search from '@/pages/Search';

//配置路由
export default new VueRouter({
    
    
    //配置路由
    routes: [
        {
    
    
            path: "/home",
            component: Home
        },
        {
    
    
            path: "/login",
            component: Login
        },
        {
    
    
            path: "/register",
            component: Register
        },
        {
    
    
            path: "/search",
            component: Search
        },
        // 重定向，在项目跑起来的时候，访问/，立马让他重定向到首页
        {
    
    
            path: "*",
            redirect: "/home"
        }
    ]
})

Reason: [email protected]+ does not support this way of writing
. Solution:

//引入插件
import Vue from 'vue';
import {
    
     createRouter, createWebHistory } from "vue-router";

//引入路由组件
import Home from '@/pages/Home';
import Login from '@/pages/Login';
import Register from '@/pages/Register';
import Search from '@/pages/Search';

const routes = [
    {
    
    
        path: "/home",
        component: Home
    },
    {
    
    
        path: "/login",
        component: Login
    },
    {
    
    
        path: "/register",
        component: Register
    },
    {
    
    
        path: "/search",
        component: Search
    },
    // 重定向，在项目跑起来的时候，访问/，立马让他重定向到首页
    {
    
    
        path: "/:pathMatch(.*)",
        redirect: "/home"
    }
]

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

export default router

2、报错：Catch all routes (“*”) must now be defined using a param with a custom regexp.

Solution: will *become/:pathMatch(.*)

{
    
    
	path: "/:pathMatch(.*)",
	redirect: "/home"
}

3、报错：Refused to apply style from ‘http://localhost:8080/iconfont.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Solution: Delete reset.css in@import "./iconfont.css";

4. The vue2 project downloaded the vue-router 4.x version by mistake

Reason: cnpm install --save vue-routerThe latest version of vue-router is automatically installed. When solving the above problems, it is found that the route still fails to register. It is found that vue2 should use vue-router 3.x, and vue-router 4.x is used in combination with vue3. Solution: reduce
vue- Router version, before the configuration is restored

cnpm i vue-router@3.5.2 -legacy-peer-deps