一.错误报告

在这里插入图片描述
WEBPACK_IMPORTED_MODULE_1_vue_router.a.beforeEach is not a function

二.解决方法

1.检查引入

在这里插入图片描述

2.检查插件

在这里插入图片描述

3.检查创建的对象

在这里插入图片描述
在这里插入图片描述

4.检查对象是否存入到实例中

在这里插入图片描述

三.错误原因

我的问题在于直接导出了export.default new Router({……})中的内容,然后写的Router.beforeEach,直接给Router这个路由插件使用了beforeEach,应该给声明的路由实例添加beforeEach方法才对,使用const router = new Router({……}) 然后使用router.beforeEach就可以了。

四.完整代码

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// import router from 'vue-router'

// import Home from '../components/Home.vue'
// import About from '../components/About.vue'
// import User from '../components/User.vue'

const Home = () =>
    import ('../components/Home.vue');
const HomeNews = () =>
    import ('../components/HomeNews.vue');
const HomeMessage = () =>
    import ('../components/HomeMessage.vue');

const About = () =>
    import ('../components/About.vue');
const User = () =>
    import ('../components/User.vue');
const Profile = () =>
    import ('../components/profile.vue');

// 1.通过Vue.use(插件),安装插件
Vue.use(Router)


// 2.创建Router对象
const routes = [{
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    },
    {
        path: '/home',
        component: Home,
        meta: {
            title: '首页'
        },
        children: [{
                path: '',
                redirect: 'news'
            }, {
                path: 'news',
                component: HomeNews
            },
            {
                path: 'messages',
                component: HomeMessage
            },
        ]
    },
    {
        path: '/about',
        component: About,
        meta: {
            title: '关于'
        }
    },
    {
        path: '/user/:id',
        component: User,
        meta: {
            title: '用户'
        }
    },
    {
        path: '/profile',
        component: Profile,
        meta: {
            title: '档案'
        }
    },
]

const router = new Router({
    routes,
    mode: 'history',
    linkActiveClass: 'active'

})


router.beforeEach(function(to, from, next) {
    // 从from跳转到to
    document.title = to.meta.title;
    next();

})

//3 将router对象存入到Vue实例
export default router;
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐