添加頁面

新建頁面

在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’:這個控制的是

如果不寫這個就是上圖樣子，寫了后

路由攔截

簡單攔截

路由攔截可以讓用戶瀏覽某些頁面時必須登陸，如果沒登陸就攔截，讓其回傳登陸頁面或者特定頁面

為了顯示效果，我又添加了一個頁面，路由payh為/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，