写的比较早。在上一篇博客VueRouter（一）中，介绍了VueRouter的基本用法。本篇博客，我们将继续深入VueRouter，解锁更多功能。1、程序化导航VueRouter中的程序化导航简单来说就是，如果我们不使用标签来定义导航链接，我们怎么跳转到页面呢？然后需要使用JavaScript编程语言来操作界面进行导航。在原生WebAPI中，除了a标签，我们通常使用window.location.href="/xxx"或者window.open("xxx")来跳转页面。如果想在不刷新页面的情况下更改url，则需要使用WebAPI中History接口新增的跳转方式。这在前端路由中有详细介绍。它是window.history.pushState()和window.history.replaceState()。这两个接口是在VueRouter内部使用的，但是VueRouter对它们进行了封装，在VueRouter实例中留下了相应的接口。那是路由器。推（）。下面这个小例子来自VueRouter官网。同样的规则适用于router-link组件的to属性。//stringrouter.push('home')//objectrouter.push({path:'home'})//命名路由router.push({name:'user',params:{userId:'123'}})//加上查询参数，就变成/register?plan=privaterouter.push({path:'register',query:{plan:'private'}})constuserId='123'router.push({name:'user',params:{userId}})//->/user/123router.push({path:`/user/${userId}`})//->/user/123//这里params没有生效router.push({path:'/user',params:{userId}})//->/user2.NavigationguardNavigationguard主要用于通过跳转或取消来守护导航，navigationguard是在路由跳转过程中执行的一个特殊的钩子函数。路由跳转看似是一瞬间的事情，其实分为各个阶段，每个阶段都提供了专门的函数，在路由跳转时自动调用。就像原生WebAPI中的window.onbeforeunload/window.onload/window.onunload这样的API。2.1全局守卫1.router.beforeEach((to,from,next)=>{//...})2.router.beforeResolve(to,from,next)=>{//...})3.router.afterEach((to,from)=>{//...})2.2Routeexclusiveguardconstrouter=newVueRouter({routes:[{path:'/foo',component:Foo,beforeEnter:(to,from,next)=>{//...}}]})2.3GuardsinsidethecomponentconstFoo={template:`...`,beforeRouteEnter(to,from,next){//渲染时对应的组件的路由在confirm之前被调用//no!有能力的！获取组件实例`this`//因为在守卫执行之前还没有创建组件实例},beforeRouteUpdate(to,from,next){//当前路由变化时调用，但是组件被复用//对于例如说，对于一个带动态参数的路径/foo/:id，当在/foo/1和/foo/2之间跳转时，//由于会渲染同一个Foo组件，所以组件实例会被复用。在这种情况下将调用此钩子。//可以访问组件实例`this`},beforeRouteLeave(to,from,next){//当导航离开组件对应的路由时调用//可以访问组件实例`this`}}3.Routelazyloading路由lazyloading就是说我们一开始不导入所有要用到的组件。而是在路由跳转到相应组件时加载组件。这样会更有效率。延迟加载之前：importAfrom'./components/A.vue'importBfrom'./components/B.vue'constroutes=[{path:'/a',component:A},{path:'/b',component:B}]延迟加载后：constA=()=>import('./components/A.vue')constB=()=>import('./components/B.vue')constroutes=[{path:'/a',component:A},{path:'/b',component:B}]
