路由

原理

通过改变url，在不重新请求页面的情况下更新视图

 

实现方式

 

hash模式，其实也就是锚点，这是html本身自带的功能，用于锚点定位，

他本身就是用来指导浏览器用的，对服务器端完全无用，不会导致页面重新请求

可以通过window.addEventListener('hashchange',function(){},false)监听

每改变一次hash在浏览器访问历会增加一个记录

 

history模式，则是通过html5的history接口实现的

history的api有 history.pushState()  history.replaceState() history.go()【history.back() history.forward()】 

 

 

对比

1，history可以将url修改成同源的任意链接，但是hash只能修改#后面部分的内容

2，history可以传递任意类型，存储更多数据，hash只能存储短字符串

3，history修改后的地址跟普通的地址是一样的，若是在修改url后，刷新，则会调用服务同名的地址（大概率404），因此需要服务器做重定向配置

 

 

vue路由的钩子函数

 

1.全局守卫

即无论访问那个路由都会触发的钩子

router.beforeEach((to,from,next)=>{
    xxxx

    next()//触发之前的钩子必须执行next，不然页面会停顿在被拦截状态
}) 进入之前触发

router.afterEach() 进入之后触发

 

 

2.路由独享守卫

顾名思义，这个是专门为这个路由提供的守卫

const router=new VueRouter({
    routes:[
        {
            path:'/foo',
            components:()=>improtant('@/components/aa.vue'),
            beforeEnter((to,from,next)=>{
                
            })
         }
    ]
})

 

 

3.路由组件级钩子

这个是提供给组件使用的钩子，但又一点药注意的是，需要是路由组件，也就在路由上注册过的组件才能使用

{

    data,

    methods

    beforeRouteEnter(to,from,next){

        //this 不指向实例 组件还没创建

        next((vm) =>{

                //vm就是实例

        })

    }

    beforeRouteUpdate(to,from,next){} 
    beforeRouteLeave(to,from,next){} 
}