添加页面

新建页面

在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完成登陆或特定操作比如验证等的时候 就可以用这个参数跳回

应用场景

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

权限控制

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

反爬虫

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

  大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：https://blog.csdn.net/qq_42027681。

未经本人允许，禁止转载

后续会推出

前端：vue入门 vue开发小程序 等
后端： java入门 springboot入门等
服务器：mysql入门 服务器简单指令 云服务器运行项目
python：推荐不温卜火 一定要看哦
一些插件的使用等

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

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