[Vue] 导航守卫

Posted 2020-12-14 lsb123

• 为什么要使用导航守卫?在一个SPA应用中,如何改变网页的标题?
  • 网页标题通过<title>来显示,但是SPA只有一个固定的html,切换不同的页面时,标题并不会改变.
  • 但是可以通过javascript来修改<title>的内容,window.document.title=‘New title‘.
  • 在Vue中可以使用生命周期函数.

  • export default{
    
     data(){},
    created(){
    document.title=‘new title‘
    },
    mounted(){},
    updated(){}
    
    }
    

     

  • 也可以使用另一种方式:导航守卫

  • //在router中的index.js文件中
    
    
    router.beforeEach((to,from,next)=>{
    
    document.title=to.matched[0].mate.title
    next()
    })

     

  •