__WEBPACK_IMPORTED_MODULE_1_vue_router__.a.beforeEach is not a function

Posted 2022-12-10 芜独独

一.错误报告

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;