首页 > 其他 > 详细

vue入门完结篇

时间:2021-07-29 01:10:54      阅读:18      评论:0      收藏:0      [点我收藏+]

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入门完结篇

原文:https://www.cnblogs.com/ywy1/p/15073141.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!