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'
- 2、报错:Capturar todas las rutas ("*") ahora debe definirse usando un parámetro con una expresión regular personalizada.
- 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.
- 4. El proyecto vue2 descargó la versión vue-router 4.x por error
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-router
la ú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