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) 导航会被终止,并且这个错误会被传到路由里面

上一篇:react-router(v5)路由更新但页面没刷新


下一篇:全栈博客开发(二)添加渲染