[JavaScript知识库] Router的导航守卫

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Router的导航守卫 -> 正文阅读

[JavaScript知识库]Router的导航守卫

文章目录

概念：

它相当于Router一个过滤器，所有的路由都会首先去执行它。

用法：

在vue的main.js中加入router.beforEach(to,from,next)

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

// 引入vuex
import store from './store'


import { postRequest }  from './utils/api';
import { putRequest }  from './utils/api';
import { getRequest }  from './utils/api';
import { deleteRequest }  from './utils/api';



Vue.use(ElementUI);
// 使用插件的形式进行请求的导入
Vue.config.productionTip = false
Vue.prototype.postRequest=postRequest;
Vue.prototype.getRequest=getRequest;
Vue.prototype.putRequest=putRequest;
Vue.prototype.deleteRequest=deleteRequest;


// 路由守卫
router.beforeEach((to,from,next)=>{
  // from 从当前的路径 to跳转到的路径  next();有这个方法才可以到to的路径 当前这个方法也可以自定义要跳转的路径 比如：next('/')跳转到根路径
  // next(error) 导航会被终止，并且这个错误会被传到路由里面
  console.log(to);
  console.log(from);
  next('/');
}
)




new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')