• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript vue-router.beforeEach函数代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中vue-router.beforeEach函数的典型用法代码示例。如果您正苦于以下问题:TypeScript beforeEach函数的具体用法?TypeScript beforeEach怎么用?TypeScript beforeEach使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。



在下文中一共展示了beforeEach函数的5个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: getAllRoutes

export const createRouter = (): VueRouter => {

  const routes: IRouteConfigAugmented[] = getAllRoutes();
  const router = new VueRouter({
    mode: 'hash',
    routes,
    scrollBehavior(to, from, savedPosition) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({x: 0, y: 0});
        }, 400); // scroll to top for each new route
      });
    },
  });

  router.beforeEach((to, from, next) => {
    const route: IRouteConfigAugmented = _.find(routes, (rt) => rt.path === to.fullPath);
    if (route) {
      StoreW.setTitle(route.text);
      StoreW.setRoute(route);
    }

    next();
  });

  return router;
};
开发者ID:remipassmoilesel,项目名称:personnal-website,代码行数:27,代码来源:router.ts


示例2: VueRouter

const createRouter = () => {
	const router = new VueRouter(ROUTER_SETTING);

	// manually hook: page not scroll to top when router changes
	// github issue: https://github.com/vuejs/vue-router/issues/173
	router.beforeEach((route, redirect, next) => {
		window.scrollTo(0, 0);
		next();
	});

	router.afterEach((route: Route) => {
		console.info(`${new Date()}: ${route.path}`);
	});

	return router;
};
开发者ID:DiscipleD,项目名称:blog,代码行数:16,代码来源:router.ts


示例3: VueRouter

var router = new VueRouter();

router.map({
	'/login': {
		name: 'login',
		component: loginState,
		auth: false
	},
	'/dashboard': {
		name: 'dashboard',
		component: dashState,
		auth: true
	},
	'/transactions': {
		name: 'transactions',
		component: transState,
		auth: true
	}
});

router.beforeEach((trans:any) => {
	if (trans.to.auth && !Auth.isLogged) {
		trans.redirect('/login');
	} else {
		trans.next();
	}
});

export default router;
开发者ID:maraisr,项目名称:gravestone,代码行数:29,代码来源:router.ts


示例4: mounted

        { path: '/implicit/callback', component: Auth.handleCallback() },
        {
            path: '/protected',
            component: {
                name: 'protected',
                template: '<div>Protected Route</div>'
            },
            meta: {
                requiresAuth: true
            }
        },
    ]
});

const redirectGuard = Vue.prototype.$auth.authRedirectGuard();
router.beforeEach(redirectGuard);

const component = Vue.extend({
    mounted() {
        const authd = this.$auth.isAuthenticated();
        const userInfo = this.$auth.getUser();
        const handleAuth = this.$auth.handleAuthentication();
        const path = this.$auth.getFromUri();
        const idToken = this.$auth.getIdToken();
        const accessToken = this.$auth.getAccessToken();
    },
    methods: {
        logout() {
            const logoutPromise = this.$auth.logout();
        },
        redirect() {
开发者ID:AlexGalays,项目名称:DefinitelyTyped,代码行数:31,代码来源:okta__okta-vue-tests.ts


示例5: if

})

router.beforeEach((to, from, next) => {
	if (to.matched.some((record) => record.meta.authorizedZone)) {
		if (!storage.getItem(config.tokenName)) {
			// console.log('Checkpoint #1')
			next({
				path: '/login',
				// query: { redirect: to.fullPath }
			})
		} else {
			// console.log('Checkpoint #2')
			next()
		}
	} else if (to.matched.some((record) => record.meta.loginPage)) {
		if (storage.getItem(config.tokenName)) {
			// console.log('Checkpoint #3')
			next({
				path: '/',
				// query: { redirect: to.fullPath }
			})
		} else {
			// console.log('Checkpoint #4')
			next()
		}
	} else {
		// console.log('Checkpoint #5')
		next() // make sure to always call next()!
	}
})

export default router
开发者ID:InnoDevelopment,项目名称:frontend,代码行数:32,代码来源:router.ts



注:本文中的vue-router.beforeEach函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript vue-router.map函数代码示例发布时间:2022-05-25
下一篇:
TypeScript vue-property-decorator.Watch函数代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap