1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
path: '/course',
component: Layout,
redirect: '/course/catalog',
name: 'Course',
meta: { title: '课程管理', icon: 'example' },
children: [{
path: 'catalog',
name: 'Catalog',
component: () =>
import ('@/views/course/catalog/index'),
meta: { title: '课程目录管理' }
},
{
path: 'content',
name: 'Content',
component: () =>
import ('@/views/course/content/index'),
meta: { title: '课程内容管理' }
}
]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App
}
})

router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
console.log(to) //没有执行?????
if (to.meta.title) {
document.title = to.meta.title
}
next()
})

刷新页面(此时路由是 /course/catalog),并没有触发此函数跳转,新开一个页面输入地址也没有触发,(直接显示/course/catalog路由组件的内容)

解决方案 : 查阅了好多资料才发现之前把 router.beforeEach 放在 文件最后了
放在 router.start 前面就好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
console.log(to)
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App
}
})

转载请保持原始链接

原始链接: https://ru23.com/note/b79658e7.html