vue-03-路由-路由守卫

妖狐艹你老母 2023-07-25 12:52 11阅读 0赞

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

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 代表的值就是 当前点击的路由，也就是我们即将去往的路由地址

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70][]

然后我们在进入页面的时候，先来判断当前进入页面是否为 登录 或 注册 页面，如果是，那就执行 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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70]: /images/20230528/5e1d44f5abcc45258a81bb6fbc0b7069.png