Introduction aux méthodes d'interception de routage Vue et aux paramètres de saut de page

Cet article présente principalement la méthode de configuration de l'interception de routage Vue et du saut de page. Il est très bon et a une certaine valeur de référence. Les amis dans le besoin peuvent se référer à

Paramètres de routage : router/index.js

export default new Router({ 
 routes: [ 
  { 
   path: '/selfcenter', 
   name: 'selfcenter', 
   meta: { 
    requireAuth: true // 配置此条，进入页面前判断是否需要登陆 
   }, 
   component: selfcenter 
  } 
 ] 
})

main.js :

/* eslint-disable no-new */ 
router.beforeEach((to, from, next) => { 
 if (to.matched.some(res => res.meta.requireAuth)) { // 验证是否需要登陆 
  if (sessionStorage.getItem('sid')) { // 查询本地存储信息是否已经登陆 
   next(); 
  } else { 
   next({ 
    path: '/login', // 未登录则跳转至login页面 
    query: {redirect: to.fullPath} // 登陆成功后回到当前页面，这里传值给login页面，to.fullPath为当前点击的页面 
    }); 
  } 
 } else { 
  next(); 
 } 
});

login.vue :

Après une connexion réussie :

sessionStorage.setItem('sid', res.data.data.sid); // 设置本地存储信息 
this.$router.push(this.$route.query.redirect); // 跳转至前一页，this.$route.query.redirect是获取上面传递过来的值

Ce qui précède représente l'intégralité du contenu de l'article , j'espère que cela sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la méthode de changement du menu de deuxième niveau vers le menu de troisième niveau dans le framework Vue iview-admin

Analyse Deux méthodes de simulation de données en vue-cli

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!