__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这个
·
一.错误报告
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;
更多推荐
已为社区贡献1条内容
所有评论(0)