VUE2快速入门(二)---添加页面和简单路由拦截
代码哈士奇 129 2

添加页面

新建页面

在views中新建一个vue文件 比如Test1125文件 在这里插入图片描述

<template>
  <div>我是狗</div>
</template>

<script>
export default {
  name: "Test1125"
};
</script>

<style scoped></style>

添加路由

在这里插入图片描述

import Vue from "vue";
import VueRouter from "vue-router";
import echartest from "../views/echartest";
import Test1125 from "../views/Test1125";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: echartest
  },
  {
    path: "/te",
    name: "te",
    component: Test1125
  }
];

const router = new VueRouter({
  // mode:'history',
  routes
});

export default router;

mode:'history':这个控制的是 在这里插入图片描述 如果不写这个就是上图样子,写了后 在这里插入图片描述 在这里插入图片描述

路由拦截

简单拦截

路由拦截可以让用户浏览某些页面时必须登陆,如果没登陆就拦截,让其返回登陆页面或者特定页面

为了显示效果,我又添加了一个页面,路由path为/tes 首先 给路由加上 meta: { requireAuth: true } 给路由加上拦截标记

{
    path: "/tes",
    name: "tes",
    component: Test1,
    meta: {
      requireAuth: true
    }
  }

我们声明一个变量 toGo先让它为true

let toGo = true;

路由拦截器如下

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (toGo) {
      next();/跳入to
    } else {
      next({
        path: "/te",/跳转路由
        query: { redirect: to.fullPath }/携带原本要跳转的页面路径参数,方便跳回
      });
    }
  } else {
    next();
  }
});

很容易看出beforeEach的意思 to就是要转向的路由,from来自,next跳转到(如果不写参数,就跳转to) 当toGo为true时 其实是没拦截的 在这里插入图片描述 现在我们让toGo为false 在这里插入图片描述发现我们没进/tes因为被拦截到了/te

而且地址栏变成http://localhost:8083/te?redirect=%2Ftes 携带了tes 当我们在te完成登陆或特定操作比如验证等的时候 就可以用这个参数跳回

应用场景

一般用在控制用户是否有权限进入,或者当游客进行某些必须是用户的操作时,跳转登陆等等

权限控制

比如我要买东西,但是没登陆信息,就需要跳转登陆页面

反爬虫

或者设置一个值,当用户不是人的时候,频繁访问一个页面,就让他跳转到验证页面,如果是人肯定验证操作,如果是机器,就会拦截,当然机器也可能会操作通过验证码,但是这也降低了他的访问频率





  大家好,我是代码哈士奇,是一名软件学院网络工程的学生,因为我是“狗”,狗走千里吃肉。想把大学期间学的东西和大家分享,和大家一起进步。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!

未经本人允许,禁止转载

在这里插入图片描述


后续会推出

前端:vue入门 vue开发小程序 等 后端: java入门 springboot入门等 服务器:mysql入门 服务器简单指令 云服务器运行项目 一些插件的使用等

大学之道亦在自身,努力学习,热血青春 如果对编程感兴趣可以加入我们的qq群一起交流:974178910

有问题可以下方留言,看到了会回复哦

预览图
评论区

索引目录