Vue路由

一、路由模式

1. Hash 模式

• 有 #/
• 是通过 window.location（）进行路由跳转，通过 onhashChange（）事件监听路由跳转

2. History 模式

• 没有 #/
• 通过H5 的history API 实现，通过history.pushState（）和 history.replaceState（）进行跳转，通过 onpopState 进行监听，但是他只能监听路由的前进和后退，源码中将history.pushState（）和 history.replaceState（）进行了统一的包装，通过 pushState 函数进行包装，不管是history.pushState 还是 history.replaceState 时，底层最终都会通过 pushState 这个函数进行跳转，通过 pushState 进行监听。

3. abstract 模式

• 支持所有 Javascript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

二、路由守卫

1. 全局守卫

​ 路由的改变会触发导航守卫，所有路由都生效，可以进行路由权限处理。

1. 全局前置守卫
	const router = new VueRouter({ ... })
	router.beforeEach((to, from, next) => {
	    // 设置动态title         
	    // 根据我们在每一个路由映射对象中设置的meta元数据 来进行一个动态title的显示
	       document.title = to.matched[0].meta.title
	    // 如果我们对beforeEach进行自定义设置 必须要调用next() 
		    next()
		})

2. 全局后置守卫
	const router = new VueRouter({ ... }) 
	router.afterEach((to, from) => { // ... })

2. 路由独享守卫

​ 可以在路由配置上直接定义 beforeEnter 守卫。单独控制某一条路由

const router = new VueRouter({ 
		routes: [ 
		  { 
		    path: '/foo', 
		    component: Foo, 
		    beforeEnter: (to, from, next) => {} 
		  } 
		] 
	}) 

3. 组件内守卫

• beforeRouteEnter 不管是哪一条路由显示该组件都会触发 ，可以控制页面是否展示。不能获取组件实例

• beforeRouteUpdate 路由组件被复用时候，/a/1为进入a页面，在当前组件中通过/a/2 进入a页面，此时a页面复用，没有被销毁，不会触发create() ，因此可以使用beforeRouteUpdate解决。

• beforeRouteLeave 离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

三、路由方法

1. resolve

   router.resolve 和 $router.push 都可以进行页面的跳转

router.resolve 可以在传递参数的时候打开新的窗口，它会返回一个跳转路由对象，里面报错一些参数：

• href : 地址字符串

  可以配合 window.open 打开新的页面

window.open(urlHref, '_blank'); // urlHref 为返回的 href 字符串

• route : 跳转的路由信息，包括参数