uybbb,御宝阁旗舰店,卡萨布兰卡简谱
index.js
import vuerouter from "vue-router"; import usersettings from "./usersettings"; import useremailssubscriptions from "./useremailssubscriptions"; import userprofile from "./userprofile"; import userprofilepreview from "./userprofilepreview"; function dynamicpropsfn(route) { const now = new date() return { name: (now.getfullyear() + parseint(route.params.years)) + '!' } } const routes = [ { path: '/user/settings/:years', props: dynamicpropsfn, // you could also have named views at tho top component: usersettings, beforeenter: (to, from, next) => { console.log('beforeenter'); next(); }, children: [ { path: 'emails', name: 'emails', //redirect: {name: 'profile'}, // redirect: function (to) { // console.log(to); // return {name: 'profile'}; // }, component: useremailssubscriptions, }, { path: 'profile', name: 'profile', //此路由對應包含了兩個vue視圖組件 components: { default: userprofile, helper: userprofilepreview }, }] } ]; const router = new vuerouter({ mode: 'history', routes, }); let isauthenticated = false; let csrf_token = document.getelementsbyname('csrf-token')[0].content; if (csrf_token) { isauthenticated = true; } else { isauthenticated = false; } router.beforeeach((to, from, next) => { console.log(csrf_token); console.log('beforeeach'); // console.log(to.name); // console.log(from.name); if (to.name !== 'login' && !isauthenticated) { next({name: 'login'}); } else { next(); } }); router.beforeresolve((to, from) => { console.log('beforeresolve'); // console.log(to.name); // console.log(from.name); }); router.aftereach((to, from) => { console.log('aftereach'); // console.log(to.name); // console.log(from.name); }) export default router;
usersettings.vue:
<template> <div class="us"> <h2>user settings {{this.name}}</h2> <usersettingsnav/> <router-view class="us__content"/> <router-view name="helper" class="us__content us__content--helper"/> </div> </template> <script> import usersettingsnav from "./usersettingsnav"; export default { name: "usersettings", props: ['name'], components: { usersettingsnav, }, beforerouteenter(to, from, next) { console.log('beforerouteenter'); // console.log(to.name); // console.log(from.name); next(vm => { }); }, beforerouteupdate(to, from, next) { console.log('beforerouteupdate'); // console.log(to.name); // console.log(from.name); next(); }, beforerouteleave(to, from, next) { console.log('beforerouteleave'); // console.log(to.name); // console.log(from.name); next(); }, } </script> <style scoped> </style>
beforeeach
守卫。 beforerouteupdate
守卫 (2.2+)。 beforeenter
。 beforerouteenter
。 beforeresolve
守卫 (2.5+)。 aftereach
钩子。 beforerouteenter
守卫中传给 next
的回调函数。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
网友评论