vuemeta（vuemeta 抓取不到）

本篇文章给大家谈谈vuemeta，以及vuemeta 抓取不到对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Vue中的事件修饰符 键盘事件 监视属性watch 深度监视 简写
• 2、Vue3+elemetPlus支持动态路由和菜单管理UI框架
• 3、vue router 怎么获取meta
• 4、Vue 面试中常问知识点整理
• 5、vue权限判定在main.js还是路由
• 6、Vue项目前后端分离下的前端鉴权方案

Vue中的事件修饰符 键盘事件 监视属性watch 深度监视 简写

 1.Prevent:阻烂信止默认事件(常用)

    2.stop:阻止事件冒泡

    3.once:事件只触发一次

    4.capture:使用事件的捕获模式

    5.self:只有event.target是当前操作的元素是才触冲消发事件

    6.passive:事件的默认行为立即执行，无需等待事件回调函数执行完毕

 2.Vue未提供别名的按键 可以使用按键原始的key值去绑定 但注意要转化为kebab-case(短横线命名)

 3.系统修饰键 ctrl alt shift meta

     (1).配合keyup使用 按下修饰键的同时 再按下其他键 随后释放其他键 事件才被触发

     (2).配合keydown使用正常触发事件

     4.也可以使用 keyCode去指定具体的按键 (不推荐)

     5.Vue.confing.keyCodes.自定义键名 = 键码  可以去定制按键名

 1.当监视的属性变化时 回调函数自动调用 进行相关操作

        2.监视属性的属性必须存在 才能进行监视

        3.监视的两种写法

        (1)new Vue时传入watch配置

        (2)通过vm.$watch监视

 (1).Vue中的watch默认不检测对象内部值的改变(一层)

        (2)配置deep:true可以检测对象内部值改变(多层)

        备注:

        (1)Vue自散历知身可以检测对象内部值的改变但Vue提供的watch默认不可以

        (2)使用watch时根据数据的具体结构 决定是否采用深度监视

[img]

Vue3+elemetPlus支持动态路由和菜单管理UI框架

内容较多请耐心阅读，你认真读完一定获益匪浅

这是一个基于vuecli+element-plus共同搭建的一个开源vue3动态路由和动态菜单开源框架，总体来说这个项目是非常优秀。你通过使用它直接实现动态明蠢路由和大高菜单管理功能，实现快速开发。支持二级菜单管理和嵌套路由管理。

"element-plus": "^1.0.2-beta.70",

"vue": "^3.0.0",

"vue-router": "^4.0.0-0"

1、unituicli3是一个基于vue3搭建的一个项目，它是 与时俱进 的， 极具时代性，紧跟vue3的脚步 。

2、项目仅仅集成了element-plus和vue-router两个必备的JavaScript库，除此之外没有再集成任何JavaScript库。这也就意味着你可以根据自己的项目需要去安装自己需要的JavaScript库， 避免因为项目集成库过多给你带来烦恼 。

3、强劲的组件管理器，我们为了帮助你实现可视化管理动态路由和菜单，我们内置了《组件管理》功能组件，使 路由和菜单管理可视化 。同时我们为了更好地实现项目管理，在vue2版本的基础上新增了可选json导出功能，让你可以快速实现json数据生成，生成用户权限路由和菜单。

4、美丽的视图框架，我们 内置了一个后台管理UI框架 ，你可以通过使用它实现admin项目的快速生成和搭建。当然你也可以自己搭建自己喜欢的UI框架结构。

5、 更少的干扰 。为了让项目更加纯净，将项目控制权更多的交给开发者，我们新建了unitui文件夹位于src文件夹下用于存放我们内置的部分，为了便于你项目的启动和理解你可以直接将ivews和components文件夹内容清空，重新搭建你的组件，因为这些目录下的文件这些并不重要。

Unituicli3因为《组件管理》而显得强大，因为这是 核心组件 ，将动态路由（添加、删除、修改）、嵌套路由和菜单管理（添加、删除、修改）变得可视化，激仿陪而且支持json数据生成使前后端间交互变得可能，你只需要将生成的json储存在数据库便可实现权限编辑。

我们虽然尽力减少对开发者的影响，但是做出一些修改是不可避免的。

import { createApp } from 'vue'

import ElementPlus from 'element-plus';

import App from './App.vue'

import router from './router'

import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失

const app = createApp(App)

app.use(ElementPlus)

app.use(router).mount('#app')

// 注册全局组件

import Uicon from './unitui/sub/Uicon.vue'

app.component('Uicon',Uicon)

你如果不是使用elementPlus作为你的UI你可以参考上面内容做出适当修改

这是一个全局注册的图标选择器，你可以在任意组件通过 使用图标选择器，它挂载在main.js文件中，你如不是使用element你需要做出修改，否则可能 影响图标选择的功能使用 。

实际效果

这是一个非常重要的内置组件，它主要用于模拟登录时的操作和信息生成，它会读取位于assets/json/文件夹下的两个json生成菜单和路由信息，json内容模拟后端返回的内容。

其中最重要的是路由的生成，你在登录后路由json信息返回后调用init_route方法，代码如下：

init_route(route_data) {

//依据后端返回的json数据生成路由

const init_route_data = []; //定义一个路由数组储存生成的路由信息

for (let index = 0; index route_data.length; index++) {

//循环后端返回的json

//循环

if (route_data[index].children != undefined) {

//有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () = import(`@/${route_data[index].component}`),

// component: (resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

},

children: [] //嵌套路由

};

for (let i = 0; i route_data[index].children.length; i++) {

init_route_data[index].children[i] = {

path: route_data[index].children[i].path, //路由url

name: route_data[index].children[i].name, //路由名

component: () = import(`@/${route_data[index].children[i].component}`),

// component:(resolve) = require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].children[i].meta.show_site, //是否全屏显示

web_title: route_data[index].children[i].meta.web_title //网站标题

}

};

}

} else {

//没有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () = import(`@/${route_data[index].component}`),

// component:(resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

}

};

// console.log(index);

}

}

// console.log(init_route_data); //打印生成初始化路由数组

for (let index = 0; index route_data.length; index++) {

//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加

this.$router.addRoute(init_route_data[index]); //循环添加数组

}

this.init_menu(); //执行菜单生成方法

},

其他三个你可以随意修改

在vue2动态路由项目之中，在app.vue文件mounted方法中调用路由生成方法，可以实现刷新路由防丢失，但是在vue3中采用同样方式，则会出现异常，原因是我们跳转发生在路由添加前，所以会出现刷新后页面没有内容，所以我们在unitui文件夹下新建init_route.js写下和login.vue文件中路由初始化相似的内容，然后再main.js中引入。

init_route.js内容：

import router from '@/router'

function init_route() {

//依据后端返回的json数据生成路由

if (sessionStorage.getItem("route_data") != null) {

const route_data = JSON.parse(sessionStorage.getItem("route_data"));

// console.log(route_data);

const init_route_data = []; //定义一个路由数组储存生成的路由信息

for (let index = 0; index route_data.length; index++) {

//循环后端返回的json

//循环

if (route_data[index].children != undefined) {

//有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () = import(`@/${route_data[index].component}`),

// component: (resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

},

children: [] //嵌套路由

};

for (let i = 0; i route_data[index].children.length; i++) {

init_route_data[index].children[i] = {

path: route_data[index].children[i].path, //路由url

name: route_data[index].children[i].name, //路由名

component: () =

import(`@/${route_data[index].children[i].component}`),

// component:(resolve) = require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].children[i].meta.show_site, //是否全屏显示

web_title: route_data[index].children[i].meta.web_title //网站标题

}

};

}

} else {

//没有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () = import(`@/${route_data[index].component}`),

// component:(resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

}

};

// console.log(index);

}

}

// console.log(init_route_data); //打印生成初始化路由数组

for (let index = 0; index route_data.length; index++) {

//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加

router.addRoute(init_route_data[index]); //循环添加数组

}

// 这里放置刷新

// console.log('app');

// const index=window.location.href.lastIndexOf("#")

// const url=window.location.href.substring(index+1,window.location.href.length);

// this.$router.push(url)

}

}

init_route()

在main.js中引用：

import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失

此时便可完成刷新自动初始化

我们通过在app.vue文件中通过获取路由中meta. show_site的值（0全屏显示，1显示在视图内），然后使用 v-if控制不同router-view的显示来实现显示位置的控制。

App.vue源码：

1、如果你不喜欢我们的ui框架，你需要开发新的ui时，没有ui框架的支持《组件管理》功能可能不能正常显示（显示空白），你可以将unitui/ subadmin/ SubAdmin.vue文件中style部分改为：

#sub_admin_back {

width: 100%;

/* 非ui框架将height写为height: 100vh; */

height: 100vh;

background-size: cover;

position: relative;

background-color: #ffffff;

border-radius: 10px;

}

1、没能尽可能减少对框架的干扰，你仍然需要保持对main.js的适当修改。

vue router 怎么获取meta

vue-router文伍穗档

$route.params

参考vue-router文档，可通过$route对象获取params参数对象郑尘。同时transition对象的to, from都可以获取$route对喊橘禅象。

Vue 面试中常问知识点整理

生命周期：Vue实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期，各个阶段有相对应的事件钩子。

beforeCreate（创建前），在数据观测和初始化事件还未开始

created（创建后），完成数据观测，属性和方法的运算，初始化事件， $el 属性还没有显示出来

beforeMount（载入前），在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted（载入后），在 el 被新创建的 vm.$el 替换，并挂载到实例上神银去之后调用。实例已完成以下的配置：用上面编译好的html内容替换 el 属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate（更新前），在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后），在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以轿瞎亩执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy（销毁前），在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后），在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

注意：

created 阶段的ajax请求与 mounted 请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态。

mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 。

初始化组件时，仅执行了 beforeCreate/Created/beforeMount/mounted 四个钩子函数

当改变 data 中定义的变量（响应式变量）时，会执行 beforeUpdate/updated 钩子函数

当切换组件（当前组件未缓存）时，会执行 beforeDestory/destroyed 钩子函数

初始化和销毁时的生命钩子函数均只会执行一次， beforeUpdate/updated 可多次执行

仅当子组件完成挂载后，父组件才会挂载

当子组件完成挂载后，父组件会主动执行一次beforeUpdate/updated钩子函数（仅首次）

父子组件在data变化中是分别监控的，但是在更新props中的数据是关联的

销毁父组件时，先将子组件销毁后才会销毁父组件

组件的初始化（mounted之前）分开进行，挂载是从上到下依次闭森进行

当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的

mixin中的生命周期与引入该组件的生命周期是仅仅关联的，且mixin的生命周期优先执行

1、什么是vue生命周期？

答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

2、vue生命周期的作用是什么？

答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3、vue生命周期总共有几个阶段？

答：它可以总共分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/销毁后。

5、DOM 渲染在哪个周期中就已经完成？

答：DOM 渲染在 mounted 中就已经完成了。

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter ，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter 。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合 Observer ，Compile和 Watcher 三者，通过 Observer 来监听自己的 model 的数据变化，通过 Compile 来解析编译模板指令（vue中是用来解析 {{}}），最终利用 watcher 搭起observer和 Compile 之间的通信桥梁，达到数据变化 —视图更新；视图交互变化（ input ）—数据 model 变更双向绑定效果。

js实现简单的双向绑定：

1、父组件与子组件传值

父组件传给子组件：子组件通过 props 方法接受数据；

子组件传给父组件： $emit 方法传递参数

2、非父子组件间的数据传递，兄弟组件传值 eventBus ，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

需求一：

在一个列表页中，第一次进入的时候，请求获取数据。

点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。

也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。

解决方案

在 App.vue设置：

假设列表页为 list.vue ，详情页为 detail.vue ，这两个都是子组件。

我们在 keep-alive 添加列表页的名字，缓存列表页。

然后在列表页的 created 函数里添加ajax请求，这样只有第一次进入到列表页的时候才会请求数据，当从列表页跳到详情页，再从详情页回来的时候，列表页就不会刷新。

这样就可以解决问题了。

需求二：

在需求一的基础上，再加一个要求：可以在详情页中删除对应的列表项，这时返回到列表页时需要刷新重新获取数据。

我们可以在路由配置文件上对 detail.vue 增加一个 meta 属性。

这个 meta 属性，可以在详情页中通过 this.$route.meta.isRefresh 来读取和设置。

设置完这个属性，还要在 App.vue 文件里设置 watch 一下 $route 属性。

这样就不需要在列表页的 created 函数里用 ajax 来请求数据了，统一放在 App.vue 里来处理。

触发请求数据有两个条件：

从其他页面（除了详情页）进来列表时，需要请求数据。

从详情页返回到列表页时，如果详情页 meta 属性中的 isRefresh 为 true ，也需求重新请求数据。

当我们在详情页中删除了对应的列表项时，就可以将详情页 meta 属性中的 isRefresh 设为 true 。这时再返回到列表页，页面会重新刷新。

1、css只在当前组件起作用

答：在 style 标签中写入 scoped 即可 例如： style scoped/style

2、v-if 和 v-show 区别

答： v-if 按照条件是否渲染， v-show 是 display 的 block 或 none ；

3、 $route 和 $router 的区别

答： $route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。而 $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。

vue权限判定在main.js还是路由

vue权限判定在凳空歼陵main.js。根据查询相关公枣改瞎开信息显示，在meta中设置roles来分配权限，在main.js中用vue的routre.beforeEach，来检验路由。

Vue项目前后端分离下的前端鉴权方案

# Vue项目前后端分离下的前端鉴权方案

### 技术栈

  前端Vue全家桶，后台.net。

### 需求分析

  1. 前端路由鉴权，屏蔽地址栏入侵

  2. 路由数据由后台管理，前端只按固定规则异步加载路由

  3. 权限控制精确到每一个按钮

  4. 自动更新token

  5. 同一个浏览器只能登录一个账号

### 前端方案

 对于需求1、2、3，采用异步加载路由方案

  1. 首先编写vue全局路由守卫

  2. 排除登录路由和无需鉴权路由

  3. 登录后请求拉取用户菜单数据

  4. 在vuex里处理菜单和路由匹配数据

  5. 将在vuex里处理好的路由数据通过`addRoutes`异步推入路由

  ```

    router.beforeEach((to, from, next) = {

      // 判断当前用户是否已拉取权限菜单

      if (store.state.sidebar.userRouter.length === 0) {

        // 无菜单时拉取

        getMenuRouter()

          .then(res = {

            let _menu = res.data.Data.ColumnDataList || [];

            // if (res.data.Data.ColumnDataList.length  0) {

            // 整理菜单路由数据

            store.commit("setMenuRouter", _menu);

            // 推入权限路由列表

            router.addRoutes(store.state.sidebar.userRouter);

            next({...to, replace: true });

            // }

          })

          .catch(err = {

            // console.log(err);

            // Message.error("服务器连接失败");

          });

      } else {

        //当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的菜单会自动进入404页面

        if (to.path == "/login") {

          next({

            name: "index"

          });

        } else {

          next();

        }

      }

    } else {

      // 无登录状态时重定向至登录 或可进入无需登录状态路径

      if (to.path == "/login" || to.meta.auth === 0) {

       慎团大 next();

      } else {

        next({

          path: "/login"

        });

      }

    }

  });

  ```

  ##### 注意

   我这里无需鉴权的路由直接写在router文件夹下的index.js，通过路由元信息meta携带指定标识

  ```

    {

      path: "/err-404",

      name: "err404",

      meta: {

         authentication: false

      },

      component: resolve = require(["../views/error/404.vue"], resolve)

    },

  ```

   上面说到路由是根据后台返回菜单数据根据一定规则生成，因此一些不是菜单，又需要登录状态的路由，我写在router文件夹下的router.js里，在上面步骤4里处理后台返回菜单数据时，和处理好的菜单路由数据合并一同通过`addRoutes`推入。 

  这样做会有一定的被地址栏入侵的风险,但是笔者这里大多是不太重要的路由，如果你要求咳咳，可以定一份字典来和后台接口配合精确加载每一个路由。

  ```

  // 加入企业

  {

    path: "/宽竖join-company",

    name: "join-company",

    component: resolve = require([`@/views/index/join-company.vue`], resolve) 

  },

  ```

   在vuex中将分配的菜单数据转化为前端可用的或喊路由数据，我是这样做的：

  管理系统在新增菜单时需要填写一个页面地址字段`Url`,前端得到后台菜单数据后根据`Url`字段来匹配路由加载的文件路径，每个菜单一个文件夹的好处是：你可以在这里拆分js、css和此菜单私有组件等

  ```

      menu.forEach(item = {

            let routerItem = {

              path: item.Url,

              name: item.Id,

              meta: {

                auth: item.Children,

              }, // 路由元信息 定义路由时即可携带的参数，可用来管理每个路由的按钮操作权限

              component: resolve =

                require([`@/views${item.Url}/index.vue`], resolve) // 路由映射真实视图路径

            };

            routerBox.push(routerItem);

        });

  ```

   关于如何精确控制每一个按钮我是这样做的，将按钮编码放在路由元信息里，在当前路由下匹配来控制页面上的按钮是否创建。

  菜单数据返回的都是多级结构，每个菜单下的子集就是当前菜单下的按钮权限码数组，我把每个菜单下的按钮放在此菜单的路由元信息`meta.auth`中。这样作的好处是：按钮权限校验只需匹配每个菜单路由元信息下的数据，这样校验池长度通常不会超过5个。

  ```

  created() {

    this.owner = this.$route.meta.auth.map(item = item.Code);

  }

  methods: {

      matchingOwner(auth) {

        return this.owner.some(item = item === auth);

      }

  }

  ```

   需求4自动更新token，就是简单的时间判断，并在请求头添加字段来通知后台更新token并在头部返回，前端接受到带token的请求就直接更新token

  ```

  // 在axios的请求拦截器中

      let token = getSession(auth_code);

      if (token) config.headers.auth = token;

      if (tokenIsExpire(token)) {

        // 判断是否需要刷新jwt

        config.headers.refreshtoken = true;

      }

  // 在axios的响应拦截器中

    if (res.headers.auth) {

      setSession(auth_code, res.headers.auth);

    }

  ```

   对于需求5的处理比较麻烦，要跨tab页只能通过`cookie`或`local`,笔者这里不允许使用`cookie`因此采用的`localstorage`。通过打开的新页面读取`localstorage`内的`token`数据来同步多个页面的账号信息。`token`使用的`jwt`并前端md5加密。

  这里需要注意一点是页面切换要立即同步账号信息。

   经过需求5改造后的全局路由守卫是这样的：

  ```

function _AUTH_() {

  // 切换窗口时校验账号是否发生变化

  window.addEventListener("visibilitychange", function() {

    let Local_auth = getLocal(auth_code, true);

    let Session_auth = getSession(auth_code);

    if (document.hidden == false  Local_auth  Local_auth != Session_auth) {

      setSession(auth_code, Local_auth, true);

      router.go(0)

    }

  })

  router.beforeEach((to, from, next) = {

      // 判断当前用户是否已拉取权限菜单

      if (store.state.sidebar.userRouter.length === 0) {

        // 无菜单时拉取

        getMenuRouter()

          .then(res = {

            let _menu = res.data.Data.ColumnDataList || [];

            // if (res.data.Data.ColumnDataList.length  0) {

            // 整理菜单路由数据

            store.commit("setMenuRouter", _menu);

            // 推入权限路由列表

            router.addRoutes(store.state.sidebar.userRouter);

            next({...to, replace: true });

            // }

          })

          .catch(err = {

            // console.log(err);

            // Message.error("服务器连接失败");

          });

      } else {

        //当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的菜单会自动进入404页面

        if (to.path == "/login") {

          next({

            name: "index"

          });

        } else {

          next();

        }

      }

    } else {

      // 无登录状态时重定向至登录 或可进入无需登录状态路径

      if (to.path == "/login" || to.meta.auth === 0) {

        next();

      } else {

        next({

          path: "/login"

        });

      }

    }

  });

}

```

   经过需求5改造后的axios的请求拦截器是这样的，因为ie无法使用`visibilitychange`，并且尝试百度其他属性无效，因此在请求发出前做了粗暴处理：

  ```

  if (ie浏览器) { 

      setLocal('_ie', Math.random())

      let Local_auth = getLocal(auth_code, true);

      let Session_auth = getSession(auth_code);

      if (Local_auth  Local_auth != Session_auth) {

        setSession(auth_code, Local_auth, true);

        router.go(0)

        return false

      }

    }

  ```

 这里有一个小问题需要注意：因为用的`local`因此首次打开浏览器可能会有登录已过期的提示，这里相信大家都能找到适合自己的处理方案

  ###  结语

经过这些简单又好用的处理，一个基本满足需求的前后端分离前端鉴权方案就诞生啦

关于vuemeta和vuemeta 抓取不到的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。