vue2配置路由及运行过程中遇到的问题

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

原代码：

//引入插件
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"
        }
    ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

原因：vue-Router@4.0+不支持这种写法
解决：

//引入插件
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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

解决：将*变为/:pathMatch(.*)

{
	path: "/:pathMatch(.*)",
	redirect: "/home"
}
1
2
3
4

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.

解决：删除reset.css中的@import "./iconfont.css";

4、vue2项目错误下载了vue-router 4.x版本

原因：cnpm install --save vue-router自动安装最新版本vue-router，在解决上述问题时发现路由仍注册失败，发现vue2应使用vue-router 3.x ，vue-router 4.x 是和 vue3 结合使用的使用
解决：降低vue-router版本，配置恢复之前的

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