vue路由守卫函数是,vue路由守卫哪几种

序：通过路由守卫可以对每次刷新或者进入的路由界面进行权限验证，相当于VUE中的全局中间件。
1.全局守卫：router.beforeEach注册一个全局前置守卫。参考文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html。

注册登录主面板router.jsLogin.vueDashBoard.vue

首先是DashBoard.vue的内容：

<template> <div> <h3>主面板</h3> <div id="nav"> <router-link to="/dashboard/home">首页</router-link> <router-link to="/dashboard/about">关于我们</router-link> <router-link to="/dashboard/mine">我的</router-link> </div> <!--设置路由出口--> <router-view></router-view> </div></template>

然后是，Login.vue的内容：

<template> <div> <h2>登录界面</h2> <button @click="login">登录</button> </div></template> <script> export default { name: "Login", methods:{ login(){ //1.登录成功 window.isLogin = true; //2.获取回调地址 const redirect = this.$route.query.redirect; if(redirect){ //有回调地址 this.$router.push(redirect); }else { //没有回调地址，去首页 this.$router.replace('/'); } } } }</script>

在router.js里面配置一个全局前置守卫：

//一级界面import Login from "./views/Login";import DashBoard from "./views/DashBoard";//二级界面import Home from "./views/Home";import About from "./views/About";import Mine from "./views/Mine";

编程式导航参考文档：https://router.vuejs.org/zh/guide/essentials/navigation.html。

const router = new Router({ routes:[ {path:'/',redirect:'/dashboard'}, { path: '/dashboard', name: 'dashboard', component: DashBoard, children:[ {path:'/dashboard',redirect:'/dashboard/home'}, {path:'home',name:'home',component:Home}, {path:'about',name:'about',component:About}, {path:'mine',name:'mine',component:Mine} ] }, {path:'/login',name:'login',component:Login} ]}); //全局路由前置守卫router.beforeEach((to,from,next) => { console.log(to, from); if(to.path != '/login'){ //验证是否登录 if(window.isLogin){ //已经登录 next(); //放行 }else { //next('/login?redirect='+to.path); //去哪里！ next('/login?redirect=/dashboard/mine'); } }else{ next(); } next();//放行}); //输出路由export default router;

后置守卫：
参考文档地址：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%90%8E%E7%BD%AE%E9%92%A9%E5%AD%90。
在router.js中加上一句：

//全局后置路由router.afterEach((to, from) => { console.log('来了！');});

2.局部守卫：用法参照全局守卫；https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB–>参考文档。
1）路由内独享的守卫：你可以在路由配置上直接定义 beforeEnter 守卫。

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ]})

2）组件内常用的路由钩子选项：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB–>参考文档。
可以在路由组件内直接定义以下路由导航守卫： beforeRouteEnter；beforeRouteUpdate (2.2 新增)；beforeRouteLeave。（顺序是先全局再局部）。

<!--Mine.vue内定义的内容--><script> export default { name: "Mine", beforeRouteEnter(to,from,next){ console.log('进入之前调用'); next(); }, beforeRouteUpdate(to,from,next){ console.log('路由参数变了！'); next(); }, beforeRouteLeave(to,from,next){ console.log('路由离开前调用'); next(); } }</script>

3.路由懒加载：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
route.js里面对应代码改成如下这样：表名该组件用时再加载。

// import About from "./views/About";const About = () => import("./views/About");

异步组件：按需加载，用到时加载。
3.<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。参考文档：https://router.vuejs.org/zh/api/#router-view。（不用经常加载的路由，使用他来包装）。
4.补充：
router.push(location, onComplete?, onAbort?)：想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。（相当于点击路由链接）。
router.replace(location, onComplete?, onAbort?):跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。（用新路由替换当前路由）。
router.back()：请求返回上一个记录路由。
router.go(+1)：请求返回下一个记录路由。
router.go(-1)：请求返回上一个记录路由。
5.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象。全局对象。
route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象。