摘要：简单介绍主人公字段介绍我们称每个路由对象为路由记录，路由记录可以嵌套。所以到我们匹配到一个路有的时候他有可能有多条路由记录。
路由元信息
为什么会有这个东西呢？
我们知道我们浏览一些网站的时候有需要验证登录的也有不需要验证登录的，如果所有页面都在做成验证登录的话对于用户的体验也是极差的，所以这个时候路由元信息就起到了很大的作用。
主人公：meta字段
介绍：
我们称每个路由对象为路由记录，路由记录可以嵌套。所以到我们匹配到一个路有的时候他有可能有多条路由记录。路由记录会暴露在对应路由对象上，我们可以通过$route.matched获取到当前路由所有的路由记录，$route.matched[n].meta可以获取其中一个路由记录的meta字段
栗子：
let routes = [{
path: "/foo",
name: "foo",
component: foo,
children: [{
path: "bar",
component: bar,
meta: {
needLogin: true//需要判断登录
}
}]
}, {
path: "/login",
name: "login",
component: login
}];
假设localhost:8080为项目地址
当访问localhost:8080/#/foo/bar的时候我们需要判断登录怎么办呢
上代码（用到了导航守卫的全局守卫中的beforeEach）：
let router = new VueRouter({
routes
});
router.beforeEach((to, from, next) => {
//判断路由记录是否需要验证登录
if(to.matched.some(current => current.meta.needLogin)){
//只要记录上需要登录 我们就得验证
/*
* 自己封装方法判断登录 sessionstorage localstorage cookie啥的自行决定
*/
let isLogin = getLoginStatus();//自己定义的判断登录的方法
if(!isLogin) {
next({
path: "/login", //跳转到登录页
query: {
redirect: to.fullPath //登录页需要知道从哪跳过来的，方便登录成功后回到原页面
}
});
} else {
next();
}
} else {
next();
}
});
ATT： next一定要执行不然钩子函数不会resolved。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90429.html
摘要：有多种方式可以在路由导航发生时执行钩子全局的单个路由独享的或者组件级的。进行管道中的下一个钩子。当前的导航被中断，然后进行一个新的导航。通过访问组件实例路由元信息你可以在中直接访问。 导航钩子 vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。 全局钩子 你可以使用 router....
摘要：滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。这个方法返回滚动位置的对象信息，长这样如果返回一个布尔假的值，或者是一个空对象，那么不会发生滚动。 滚动行为 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面...
摘要：简介主要用来通过跳转或取消的方式守卫导航。判断必要操作是否进行没进行的话中断跳转。进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是确认的。中断当前的导航。如果传入的参数是一个实例，则导航会被终止且该错误会被传递给注册过的回调。 简介 主要用来通过跳转或取消的方式守卫导航。例如判断登录信息：没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。 分为三大类：全局守卫...
阅读 1370·2021-10-14 09:43
阅读 962·2021-09-10 10:51
阅读 1394·2021-09-01 10:42
阅读 2163·2019-08-30 15:55
阅读 552·2019-08-30 15:55
阅读 2310·2019-08-30 14:21
阅读 1667·2019-08-30 13:04
阅读 3440·2019-08-29 13:09
