__WEBPACK_IMPORTED_MODULE_1_vue_router__.a.beforeEach is not a function

一.错误报告

在这里插入图片描述
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;
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值