精华内容
下载资源
问答
  • Vue路由守卫

    2020-10-06 20:44:19
    Vue路由守卫 路由守卫常用在登录页面跳转前的验证,判断是否登陆,登录显示个人中心页面,没登录则显示登录页面,这在网页上也是很常见的操作。 总的来说,是当路由跳转前或跳转后、进入、离开某一个路由前、后,...

    Vue路由守卫

    路由守卫常用在登录页面跳转前的验证,判断是否登陆,登录显示个人中心页面,没登录则显示登录页面,这在网页上也是很常见的操作。

    总的来说,是当路由跳转前或跳转后、进入、离开某一个路由前、后,需要做某些操作,就可以使用路由钩子来监听路由的变化。

    路由守卫有三种使用的方式:全局路由守卫、局部路由守卫(单个路由守卫和组件内路由守卫)。
    1.全局路由守卫
    全局路由守卫有两个钩子函数:beforeEach前置路由守卫和afterEach后置路由守卫。

    若用Vue-cli脚手架,在路由的配置文件里配置全局路由守卫。

    守卫方法接收三个参数:
    to:即将要进入的目标路由对象
    from:当前导航正要离开的路由
    next:执行下一步(全局的afterEach不需要next)

    //全局的前置路由守卫
    router.beforeEach((to, from, next) => {
        //会在任意路由跳转前执行,next一定要记着执行,不然路由不能跳转了
        if(to.path === "/cinema"){
     	 console.log("进入cinema就执行")
      }
      if(from.path === "/cinema"){
     	 console.log("从cinema跳出来后执行")
      }
      next()   //必须要执行
    })
    
    //全局的后置路由守卫(少用)
    router.afterEach((to, from) => {
        //会在任意路由跳转后执行
      console.log('参数不需要next,已经进入了就不需要放行了')
    })
    

    2-1.局部路由守卫(单个路由守卫)
    若用Vue-cli脚手架,在路由的配置文件里配置,设置在被守卫的路由路径里,beforeEnter进入到路由之前。

     routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => {
            console.log("进入到foo哦...")
          }
        }
      ]
    

    2-2.局部路由守卫(组件内路由守卫)
    beforeRouteEnter还没进到组件之前,啥也没有beforeRouteUpdate用于跳转到带有动态参数的路径切换时
    beforeRouteLeave可以从当前组件离开并且拿到this

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

    2020-07-23 17:30:59
    vue路由守卫 vue路由守卫分为:全局的,单个路由独享的,组件级的vue官方文档 回调函数参数 to:进入到哪个路由去, from:从哪个路由离开, next:函数,决定是否展示你要看到的路由页面 next({ name: ‘home’… ...

    vue路由守卫

    vue路由守卫分为:全局的,单个路由独享的,组件级的vue官方文档

    回调函数参数

    to:进入到哪个路由去,
    from:从哪个路由离开,
    next:函数,决定是否展示你要看到的路由页面

    next({ name: ‘home’… } 或者 next({ path: ‘/’ }) 跳转一个不同的地址
    next(false): 中断当前导航

    全局守卫

    • 全局前置守卫:router.beforeEach((to, from, next) => { })
    • 全局解析守卫:router.beforeResolve((to, from, next) => { })
    • 全局后置钩子:router.afterEach((to, from) => { })

    1、router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
    2、注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身

    组件中使用路由守卫

    • beforeRouteEnter: 进入路由前的处理
    • beforeRouteUpdate:$route对象发生变化
    • beforeRouteLeave:离开路由前处理
    const Foo = {
      	template: `...`,
      	beforeRouteEnter (to, from, next) {
    	  	// 在渲染该组件的对应路由被 confirm 前调用
    	    // 不!能!获取组件实例 `this` 使用vm
    	    // 因为当守卫执行前,组件实例还没被创建
    	    next(vm => {
              if(from.query.isManager === '0'){
                next(false)
                vm.$router.replace({name: 'memberInfo', query: {agentCode:res.code,routerFrom: from.name}
              }
          	})
    	  },
    	  beforeRouteUpdate (to, from, next) {
    	    // 在当前路由改变,但是该组件被复用时调用
    	    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    	    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    	    // 可以访问组件实例 `this`
    	  },
    	beforeRouteLeave(to,from,next){
          Dialog.closeAll()
          if(to.name=='policyList'){
            let content ='返回后当前页面内容无法保存,确定返回吗?'
            Dialog.confirm({
              title: '',
              content: content,
              confirmText: '确定',
              onConfirm: () => next(),
              onCancel:()=> next(false),
            })
          }else{
            next()
          }
        },
    

    路由独享守卫

    在路由中直接配置 beforeEnter

    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => {
            next({name: 'home', query: {fid:'001'}}
          }
        }
      ]
    })
    
    展开全文
  • vue 路由守卫

    2020-10-16 16:04:45
    当导航发生改变的时候,vue-router 会在多个不同的地方调用指定的函数,也就是与路由有关的生命周期函数,也称为:路由守卫 组件内守卫 路由独享守卫 全局守卫 组件内守卫 定义在组件内的与路由有关的生命周期函数...

    vue-router

    路由守卫

    当导航发生改变的时候,vue-router 会在多个不同的地方调用指定的函数,也就是与路由有关的生命周期函数,也称为:路由守卫

    • 组件内守卫
    • 路由独享守卫
    • 全局守卫

    组件内守卫

    定义在组件内的与路由有关的生命周期函数(守卫)

    • beforeRouteEnter
    • beforeRouteUpdate
    • beforeRouteLeave

    beforeRouteEnter

    当路由解析完成,并中指定的组件渲染之前(组件 beforeCreate 之前),不能这里通过 this 访问组件实例,需要通过 next 回调来进行调用

    beforeRouteEnter (to, from, next) {
        // 不!能!获取组件实例 `this`
        // 因为当守卫执行前,组件实例还没被创建
      	next(vm => {
          // vm...
        })
    }
    

    beforeRouteUpdate

    在当前路由改变,但是该组件被复用时调用

    beforeRouteUpdate (to, from, next) {
        // 可以访问组件实例 `this`
    },
    

    beforeRouteLeave

    导航离开该组件的对应路由时调用

    beforeRouteLeave (to, from, next) {
        // 可以访问组件实例 `this`
    }
    

    路由守卫参数

    to

    即将要进入的目标 路由对象($route)

    from

    当前导航正要离开的路由对象($route)

    next

    路由确认回调函数,类似 Promise 中的 resolve 函数,一定要确保调用 next 函数,但是后续的导航行为将依赖 next 方法的调用参数

    • next() : 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)

    • next(false) : 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址

    • next('/') 或者 next({ path: '/' }) : 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航

    路由独享的守卫

    可以在路由配置上直接定义 beforeEnter 守卫,相对来说,应用不多

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

    全局守卫

    全局守卫是注册在 router 对象(new VueRouter({…}))上的

    • beforeEach
    • beforeResolve
    • afterEach

    beforeEach

    当一个导航触发时,全局前置守卫按照创建顺序调用

    router.beforeEach((to, from, next) => {
      // ...
    })
    

    beforeResolve

    在所有组件内守卫和异步路由组件被解析之后被调用

    router.beforeResolve((to, from, next) => {
      // ...
    })
    

    afterEach

    导航被确认后调用

    router.afterEach((to, from) => {
      // ...
    })
    

    因为导航已经被确认,所以没有 next

    展开全文
  • VUE路由守卫

    2021-03-20 20:26:04
    序:通过路由守卫可以对每次刷新或者进入的路由界面进行权限验证,相当于VUE中的全局中间件。 1.全局守卫:router.beforeEach注册一个全局前置守卫。 注册 登录 主面板 注册 Login.vue DashBoard.vue ...

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

    注册 登录 主面板
    router.js Login.vue DashBoard.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–>参考文档。
    可以在路由组件内直接定义以下路由导航守卫: beforeRouteEnterbeforeRouteUpdate (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对象,是一个局部对象。

    展开全文
  • 主要给大家介绍了关于vue路由守卫及路由守卫无限循环问题的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,827
精华内容 1,130
关键字:

vue路由守卫

vue 订阅