Router的导航守卫

概念：

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

用法：

1. 在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')

它的三个参数的作用

1. from 从当前的路径 to跳转到的路径

2 next():有这个方法才可以到to的路径 当前这个方法也可以自定义要跳转的路径 比如：next(’/’)跳转到根路径

3. next(error) 导航会被终止，并且这个错误会被传到路由里面

---

这是一条美丽的分割线，有帮助的可以点表赞哦。