vue-route杂谈

vue-router杂谈

简介

说到 vue-router ，首先脑海中浮现出几个对象：

router,routes,route

说到 route 脑海中又有了几个属性：

path,component,name

还有几个方法：

BeforeRouteUpdate()，BeforeRouteEnter()，BeforeRouteLeave()，router.beforeEach()

router 路由器，功能是根据路由表实现路由和组件的映射，可通过 go()，replace()，push() 方法做编程式路由切换。

routes 路由表，存储路由的数组。

route 路由，路由表中的元素，包含 url 地址(path)、路由名(name)、组件(component)、路由参数(params)、查询串(query) 等信息的对象。让 url 地址(path)和组件(component)形成映射关系，路由名(name)则是地址的别名 。

使用 vue-router

地址栏输入地址后，router 通过 path 查找路由表中的路由，依据路由元信息映射到 component，实现输入指定地址显示指定组件。

而使用 router.push() 等方法切换路由时，router 通过路由别名 name 找到路由，根据路由元信息映射到 component 完成路由切换。

BeforeRouteWTF()，根据文档的说法，这个玩意称作导航守卫。“导航”意为路由发生变化，“守卫”意为声明周期回调(句柄)。

当参数或查询改变时，不会触发进入/离开的导航守卫，而会触发更新的导航守卫。所以，进入/离开守卫与更新守卫是互斥的。

当path的查询和参数被修改时，进入 BeforeRouteUpdate()；当查询和参数未被修改，或path被修改时，进入 BeforeRouteEnter() 和 BeforeRouteLeave()

因此

路由变更有两种：路由修改和路由切换

前者复用实例，后者销毁并创建新实例

关于路由切换时，watch route 无法触发这个问题，我的解释是这样的：组件实例被销毁，是对响应式对象的直接销毁，watch 无法追踪。