页面崩溃

Vue的路由动态重定向和导航守卫实例

根据vue官⽅⽂档，对于重定向有详细的⽰例，但是关于使⽤⽅法动态重定向的描述却不多，重定向部分的描述如下：

重定向

重定向也是通过routes配置来完成，下⾯例⼦是从/a重定向到/b：

constrouter=newVueRouter({

routes:[

{path:'/a',redirect:'/b'}

]

})

重定向的⽬标也可以是⼀个命名的路由：

constrouter=newVueRouter({

routes:[

{path:'/a',redirect:{name:'foo'}}

]

})

甚⾄是⼀个⽅法，动态返回重定向⽬标：

constrouter=newVueRouter({

routes:[

{path:'/a',redirect:to=>{

//⽅法接收⽬标路由作为参数

//return重定向的字符串路径/路径对象

}}

]

})`这⾥写代码⽚`

关于动态重定向的⽰例如下：

{path:'/dynamic-redirect/:id?',

redirect:to=>{

const{hash,params,query}=to

if(==='foo'){

return{path:'/foo',query:null}

}

if(hash==='#baz'){

return{name:'baz',hash:''}

}

if(){

return'/with-params/:id'

}else{

return'/bar'

}

}

}

⾸先参数解构，获取hash、params、query，然后根据获取值进⾏逻辑判断之后动态路由重定向。这⾥的return值是path值，

⽽不是params值，必须是⼀个已经存在的path才能进⾏路由重定向。⽽且这个path不能使⾃⾝，因为作为⼀个重定向路由跳

转到⾃⾝还要继续重定向，就会进⾏⼀个死循环。

现在需求如下：

为了防⽌⽤户随便改变路由参数⽽导致页⾯崩溃，需要进⾏路由重定向，将不符合要求的参数进⾏重定向到⼀个规范页⾯。⽐

如⽤户点击按钮跳转/list/1但是⽤户⾃⼰将1进⾏改变传递不符合规范的参数给页⾯，希望能够在⽤户改变参数值后跳转到默认

的规范页⾯

以上代码实现的效果是拿到路由参数，如果⽤户将页⾯参数改的不符合规范就进⾏路由重定向。使得页⾯可以获取正确参数

值。现在的效果是如果⽤户输⼊/1则进⼊正常页⾯/list/1,输⼊/xsajsxoal、/5、/-5等不符合规范的参数就会跳转进⼊/list/0。

虽然重定向的逻辑是没有问题的但问题依旧存在。那⽤户继续将/list/1改成/list/xsjknxkja怎么办呢？

可见重定向是不适合解决这个问题的。这时就⽤到了vue路由的导航守卫。导航守卫的实现⽅式如下：

{

path:'/:type',

name:'normal',

component:index,

beforeEnter(to,from,next){

if(/^[0-3]$/.test()){

next()

}else{

next('/0')

}

}

}

关于导航守卫官⽅⽂档描述如下：

正如其名，vue-router提供的导航守卫主要⽤来通过跳转或取消的⽅式守卫导航。有多种机会植⼊路由导航过程中：全局的,

单个路由独享的,或者组件级的。

记住参数或查询的改变并不会触发进⼊/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使⽤

beforeRouteUpdate的组件内守卫。

你可以使⽤Each注册⼀个全局前置守卫：

constrouter=newVueRouter({...})

Each((to,from,next)=>{

//...

})

当⼀个导航触发时，全局前置守卫按照创建顺序调⽤。守卫是异步解析执⾏，此时导航在所有守卫resolve完之前⼀直处于等

待中。

每个守卫⽅法接收三个参数：

to:Route:即将要进⼊的⽬标路由对象

from:Route:当前导航正要离开的路由

next:Function:⼀定要调⽤该⽅法来resolve这个钩⼦。执⾏效果依赖next⽅法的调⽤参数。

next():进⾏管道中的下⼀个钩⼦。如果全部钩⼦执⾏完了，则导航的状态就是confirmed（确认的）。

next(false):中断当前的导航。如果浏览器的URL改变了（可能是⽤户⼿动或者浏览器后退按钮），那么URL地址会重置到

from路由对应的地址。

next(‘/')或者next({path:‘/'}):跳转到⼀个不同的地址。当前的导航被中断，然后进⾏⼀个新的导航。

next(error):(2.4.0+)如果传⼊next的参数是⼀个Error实例，则导航会被终⽌且该错误会被传递给r()注册过的回

调。

确保要调⽤next⽅法，否则钩⼦就不会被resolved。

根据需求并不需要使⽤到全局守卫，只需要使⽤到路由独享守卫，因此只需要在路由内添加beforeEnter然后判断是否符合参

数规范，是的话⽤next()进⼊下⼀个钩⼦,否则⽤next(‘/')跳转到⽬标地址。

以上这篇Vue的路由动态重定向和导航守卫实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多

⽀持。