vue入门完结篇

2021/7/28 23:35:46

编程Tag： vue router 路由跳转 token 入门 next false 完结篇

本文主要是介绍vue入门完结篇，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.vue 嵌套路由

用法:在router对象中使用children属性定义嵌套路由

示例:

ps:重定向使用redirect表明此请求要重定向的地址

2.参数传递

使用对象传递参数 to ={{name:'地址' ,id: 1}}

通过$route.param.id

3.路由钩子

router.beforeEach((to, from, next) => { let token = router.app.$storage.fetch("token"); let needAuth = to.matched.some(item => item.meta.login); //返回的就是当前路由匹配到的组件类 if(!token && needAuth) return next({path: "/login"}); next(); });

beforeEach函数有三个参数：

to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

afterEach函数不用传next()函数

其中next有三个方法

(1)next(); //默认路由

(2)next(false); //阻止路由跳转

(3)next({path:'/'}); //阻止默认路由，跳转到指定路径

这篇关于vue入门完结篇的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

vue入门完结篇

beforeEach函数有三个参数：

相关编程文章