vue-03-路由-路由守卫

首先，路由守卫存在三种情况

1、全局守卫 router.beforeEach

在 mian.js 内部添加全局守卫，to 表示去往哪个路由，from 表示从哪个路由离开， next 是一个方法，代表的是是否展示路由页面，如果不使用next方法，那么指定页面无法显示，现在点击弹窗确定之后，页面路由内容才会展示

const router = new VueRouter({        //实例化路由对象，将routes配置的路由放进去
  routes,                             //传递routes路由数组
  mode : "history"                    //干掉浏览器#
})

//全局守卫
router.beforeEach((to, from, next) => {
  // to and from are both route objects
  alert('还没有登录，请先登录');
  next()
})

我们打印 to 这个属性，可以得到下面的返回值，其中 path 代表的值就是当前点击的路由，也就是我们即将去往的路由地址

然后我们在进入页面的时候，先来判断当前进入页面是否为登录或注册页面，如果是，那就执行 next（）方法，显示当前路由，如果不是两者中的一个，那么则弹窗请登录，且指定到登录界面。

也就是说，只有在点击注册或登录界面时，我们才能看到界面，且不会弹窗，否则点击其他链接都会触发弹窗，且直接跳转到指定的登录界面

//全局守卫
router.beforeEach((to, from, next) => {
  // to and from are both route objects
  // alert('还没有登录，请先登录');
  // next()\
  // console.log(to)
  // console.log(from)

  if( to.path == "/login" || to.path == "/register"){
    next()
  }else{
    alert("还未登录，请先登录！")
    next("/login")		//next 方法，指定跳转的路由
  }
})

ps：与此同时：针对全局守卫，还存在一个与之相对的后置钩子，

后置钩子和全局守卫其实很类似，但是后置钩子没有 next 方法，只有 to 和 from 两个参数

且后置钩子是进入页面之后触发的，而全局守卫则是进入页面之前触发的

//后置钩子
router.afterEach( (to , from) => {
  alert('msg');
})

2、路由独享的守卫 beforeEnter

我们之前的全局守卫，是在main.js内部全局定义的路由守卫，现在的是路由独享的守卫，在配置路由时，写在路由参数内部

beforeEnter 也是存在三个参数，和全局守卫类似，next() 方法可以控制路由是否显示，以及显示哪个路由不写next()、或 next(false) 都是不会跳转路由的，next() 会跳转到点击的路由，next("/login") 指定跳转到登录界面

const routes = [                       //配置路由
  { path: '/', name:"indexLink", component: Home },
  { path: '/menu', name:"menuLink", component: Menu },
  { path: '/login', name:"loginLink", component: Login },
  { path: '/register', name:"registerLink", component: Register },
  { path: '/admin', name:"adminLink", component: Admin ,beforeEnter: (to, from, next) => {

    alert('非登录状态不能访问此页面！');
    // next()         //显示当前访问的路由

    // next(false)    //不显示当前访问的路由

    // next("/login")    //指定访问的路由

    if( to.path == "/login" || to.path == "/register"){
      next()
    }else{
      // alert("还未登录，请先登录！")
      next("/login")
    }

  }},
  { path: '/about', name:"aboutLink", redirect: "/about/contact", component: About ,children:[
    { path: '/about/contact', name:'contactLink' ,redirect:"/about/contact/phoneLink", component: Contact ,children:[
      { path: '/about/contact/phoneLink',name:"phoneLink", component: Phone },
      { path: './persionNameLink',name:"persionNameLink", component: PersionName }
    ]},
    { path: '/delivery', name:'deliveryLink' , component: Delivery },
    { path: '/history', name:'historyLink' , component: History },
    { path: '/orderingGuide', name:'orderingGuideLink' , component: OrderingGuide },
  ]},
  { path: '*', redirect:  "/menu" },
]

3、组件内的守卫 beforeRouteEnter

，写在组件内部，在进入组件之前，触发该守卫，该组件内守卫 beforeRouteEnter 也存在三个参数，作用和其他守卫类似，进入哪个路由，离开哪个路由，展示哪个路由

<template>
    <h1>ADMIN</h1>
</template>

<script>
    export default{
        data () {
            return {
                name : "aolie"
            }
        },

        beforeRouteEnter (to, from, next) {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当守卫执行前，组件实例还没被创建
        },
        beforeRouteUpdate (to, from, next) {
            // 在当前路由改变，但是该组件被复用时调用
            // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
            // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
            // 可以访问组件实例 `this`
        },
        beforeRouteLeave (to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
        }
        
    }
</script>

马克的图布

发布了13 篇原创文章 · 获赞 0 · 访问量 107

私信关注

vue-03-路由-路由守卫

猜你喜欢