想要实现的效果
router文件夹下的index.js的写法:
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/demo1'
import home from '@/components/home'
import about from '@/components/about'
import user from '@/components/user'
import homeMessage from '@/components/HomeMessage'
import homeNews from '@/components/HomeNews'
import VueRouter from 'vue-router'
Vue.use(Router)
const routes=[
{
path: '',
redirect: '/home',
},
{
path: '/home',
name: 'home',
meta:{
title:'首页'
},
component: home,
children:[
{
path: 'homeMessage',
name: 'homeMessage',
component: homeMessage
},
{
path: 'homeNews',
name: 'homeNews',
component: homeNews
}
],
},
{
path: '/about',
name: 'about',
component: about,
meta:{
title:'更多'
},
},
{
path: '/user',
name: 'user',
component: user,
meta:{
title:'用户'
},
}
]
const router=new VueRouter({
routes,
mode:'history',
linkActiveClass:'active'
})
//前置钩子
router.beforeEach((to,from,next)=>{
console.log(to.meta)
document.title=to.meta.title
next()
console.log('前置钩子')
});
//后置钩子
router.afterEach((to,from)=>{
document.title=to.meta.title
console.log('后置钩子')
})
export default router
其中需要:
- 在跳转路径的配置里添加meta属性
- 选择前置钩子或者后置钩子,将to里面的meta里的title字段赋值给document的title字段
ps:前置钩子需要表示是在跳转前发生,需要自己调用一下next()函数
后置钩子表示是在跳转后,直接获取to.meta.title赋值即可
调用顺序展示: