vue-router全局导航守卫
实现组件跳转时,浏览器标题更新
①router的index.js文件中
routes配置添加meta属性
②router.beforeEach方法
import Vue from 'vue' import VueRouter from 'vue-router' const Home = () => import('../components/Home') const HomeNews = () => import('../components/HomeNews') const HomeMessage = () => import('../components/HomeMessage') const About = () => import('../components/About') const User = () => import('../components/User') const Profile = ()=> import('../components/Profile') //1.通过Vue.use(插件),安装插件 Vue.use(VueRouter) //2.创建VueRouter对象 const routes = [ { path:'/', //重定向到home redirect: '/home' }, { path:'/home', component: Home, meta: { title: '首页' }, children: [ { path: '',//设置嵌套路由默认路径 redirect: 'message' }, { path: 'news',//子组件不能加/ component: HomeNews }, { path: 'message', component: HomeMessage } ] }, { path:'/about', component: About, meta: { title: '关于' }, }, { path: '/user/:userName', component: User, meta: { title: '用户' }, }, { path: '/profile', component: Profile, meta: { title: '档案' }, } ] const router = new VueRouter({ mode: 'history',//使用history模式,去除url中的#符号(hash模式) //配置路由和组件之间的应用关系 routes }) //前置钩子,跳转前回调(全局守卫) router.beforeEach((to, from, next) => { document.title = to.matched[0].meta.title console.log("跳转前") console.log("---"+JSON.stringify(to)) next() }) //后置钩子,跳转后回调(全局守卫) router.afterEach((to,from)=>{ console.log("跳转后") }) //3.将router对象传入到vue实例 export default router