vue-router（路由原理？路由守卫？传参？）

路由原理：

路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给Web服务器，最终返回客户端。

路由的2种模式：
1、hash模式
在浏览器网络地址中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；
特点：
hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，
hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

2、history模式
history采用HTML5的新特性；且提供了两个新方法：pushState()和replaceState()可以对浏览器历史记录栈进行修改，以及popState事件监听到状态变更。
特点:
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致。

路由守卫：

路由守卫使用的方式有三种 （全局的路由守卫、单个路由规则独享的守卫 、组件级路由守卫）

1、全局的路由守卫：无论访问哪一个路径，都会触发全局的钩子函数。
router.beforeEach 进入路由之前
router.beforeResolve )在beforeRouteEnter调用之后调用
router.afterEach 进入路由之后
2、组件级的路由守卫：放在要守卫的组件里，跟data和methods同级。

beforeRouteEnter 路由跳转进入之前
beforeRouteUpdate) 页面参数更新时触发
beforeRouteLeave 离开这个路由触发
3、单个路由独享的守卫

beforeEnter只有访问到这个路径，才能触发钩子函数。

路由守卫钩子函数里面分别有三个参数：

1、to
2、from
3、next
to和from是将要进入和将要离开的路由对象。
next()这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。
next() 进入该路由
next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。 next 跳转新路由，当前的导航被中断，重新开始一个新的导航。

路由传参：

三种：

分别是query、params、动态路由传参。
传参：this.$router.push({path:"/index",query:{id:1}})       接受：this.$route.query.id。
传参：this.$router.push({name:"/Index",params:{id:1}})     接受：this.$route.params.id。

区别:
(1) query可以使用name和path传参，而params只能使用name
(2) 使用params传参刷新后不会保存，而query传参刷新后可以保存
(3) Params在地址栏中不会显示，query会显示
(4) Params可以和动态路由一起使用，query不可以
还有一种动态路由传参
你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: ‘evan’ }
/user/:username/post/:post_id	/user/evan/post/123	{ username: ‘evan’, post_id: ‘123’ }