Enrutamiento de configuración de Vue2 y problemas encontrados durante la operación

1、报错:no se encontró la exportación 'predeterminada' (importada como 'VueRouter') en 'vue-router'

Codigo original:

//引入插件
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"
        }
    ]
})

Motivo: [email protected]+ no admite esta forma de escritura
Solución:

//引入插件
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、报错:Capturar todas las rutas ("*") ahora debe definirse usando un parámetro con una expresión regular personalizada.

Solución: se *convertirá/:pathMatch(.*)

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

3、报错:Se negó a aplicar el estilo de 'http://localhost:8080/iconfont.css' porque su tipo MIME ('text/html') no es un tipo MIME de hoja de estilo compatible y la verificación estricta de MIME está habilitada.

Solución: Eliminar reset.css en@import "./iconfont.css";

4. El proyecto vue2 descargó la versión vue-router 4.x por error

Motivo: cnpm install --save vue-routerla última versión de vue-router se instala automáticamente. Al resolver los problemas anteriores, se encuentra que la ruta aún no se registra. Se encuentra que vue2 debe usar vue-router 3.x y vue-router 4. x se usa en combinación con vue3 Solución: reducir
la versión de vue-Router, antes de restaurar la configuración

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

Supongo que te gusta

Origin blog.csdn.net/qq_37344867/article/details/126138464
Recomendado
Clasificación