Vue-Router

路由的hash和history区别特别重要

默认是hash

hash：他的url带着# www.crucial.cn/#/xiaosong, hash值为#/xiaosong

特点：hash只出现在url里面，不会出现在http请求中，改变hash值不会重新加载页面，但是浏览器不会自主地记录前后的路径变换，低版本IE支持这种模式

原理：针对上面的浏览器不会自主记录前进和后退的路由，可以通过onhashchange来监听

window.onhashchange = function(event){
	console.log(event.oldURL, event.newURL);
	let hash = location.hash.slice(1);
}

这样可以无须通过后端请求就可以监听事件变化从而来加载相应的代码，实现页面的前进和后退

history：传统的路由分发模式，即用户输入一个url,服务器接收url并解析，然后处理逻辑，这样就是没有#更好看一点，但是需要后台配置支持，否则出现404

API：

• 修改状态：pushState和replaceState 这两个API也是当路径变化的时候不会访问后端
• 切换状态：history.forward() back go分别是前进后退跳转操作

对比

调用history.pushState相比hash的优势有

• pushState设置的url可以是当前URL同源的任意URL，而hash只可修改#后面的部分，只能设置当前url同文档的url

• pushState可以设置与当前相同的url，可以将记录添加进栈中，而hash设置的新值必须与原来的不一样才能入栈

• pushState通过stateObject参数可以添加任意类型的数据进记录中，而hash只能添加短字符串

• pushState可以额外设置title属性

• hash情况下后台没有对路由全覆盖也不会返回404，而history必须跟后端的url一致才不会报404

如何获取hash变化

监听$route

// 监听,当路由发生变化的时候执行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},

window.location.hash读取#值，可读可写，写入是可以在不重载网页的前提下添加一条历史访问记录

$route和$router的区别

• $route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数

• $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。

Vue-router路由钩子在生命周期的体现

• 全局钩子

  • router.beforeEach全局前置守卫，进入路由之前(判断是否登录，没登录就重定向到登录页)

  • router.beforeResovle在beforeRouterEnter调用之后调用

  • router.afterEach全局后置钩子，进入路由之后(一般用于跳转后滚动条回到顶部)

• 单个路由独享

  • 不想全局配置守卫，可以为某些路由单独配置

export default [    
    {        
        path: '/',        
        name: 'login',        
        component: login,        
        beforeEnter: (to, from, next) => {          
            console.log('即将进入登录页面')          
            next()        
        }    
    }
]

• 组件内钩子

  • beforeRouteEnter进入组件前触发

    • 注意点，beforeRouteEnter组件内还访问不到this，因为该守卫执行前组件实例还没有被创建，需要传一个回调给 next来访问

beforeRouteEnter(to, from, next) {      
    next(target => {        
        if (from.path == '/classProcess') {          
            target.isFromProcess = true        
        }      
    })    
}

• beforeRouteUpdate当前地址改变且复用当前组件时触发，例如/foo/1 -> /foo/2

• beforeRouteLeave离开组件前触发

params和query的区别

• query用this.$route.query.name引入params用this.$route.params.name
• url显示query更像get传参，params类似post
• query在刷新时不会丢失参数，params在刷新时会丢失参数

Vue-router跳转和location.href有什么区别

使用 location.href= /url来跳转，简单方便，但是刷新了页面；

使用 history.pushState( /url ) ，无刷新页面，静态跳转；

引进 router ，然后使用 router.push( /url ) 来跳转，使用了 diff 算法，实现了按需加载，减少了 dom 的消耗。

其实使用 router 跳转和使用 history.pushState() 没什么差别的，因为 vue-router 就是用了 history.pushState() ，尤其是在 history 模式下。