vue脚手架 路由跳转,生命周期和动态路由

目录

01 路由的跳转方式

02 路由的生命周期

03 动态路由的使用

---

01 路由的跳转方式

        路由跳转的两种方式

                根据path跳转

                根据name跳转

        路由跳转传参:

          1.path+query传参

                this.$router.push({

                        path:'/路由路径',

                        query:{

                                要传递的数据的键值对

                        }

                })

            获取方式:

                在目标路由对应的组件里面mounted钩子函数里面

                this.$router.query.键  获取值

          2.name+params传参

                this.$router.push({

                        name:'路由的name值',

                        params:{

                                传递数据的键值对

                        }

                })

               获取方式:

                        this.$router.params.键   获取数据

        replace方法跳转传参和push方法跳转传参的使用方式一样  区别是replace没有历史记录.

        两种传参方式的优缺点:

                path+query:

                        优点:当前页面刷新后 传递过来的数据一直在

                        缺点:地址栏会通过拼接的形式显示传递的数据

                name+params:

                        优点:数据不会在地址栏体现出来 

                        缺点: 一旦目标页刷新  数据丢失 只有跳转过来的第一次数据存在(数据补偿)

        this.$router和this.$route的区别:

                this.$router是全局的路由表对象 整个项目只有一个

                        就是new VueRouter  new出来的那个,最后注册到new Vue里面的那个router对象

                this.$route 是每一个页面组件对应的那个路由对象

                        就是路由表中 routes 里面的其中一个对象

                        

02 路由的生命周期

        路由的生命周期(也叫做路由守卫)

                路由发生跳转的时候触发的回调函数

        分类:

       1. 全局路由守卫(重点)

                整个项目所有路由跳转都会触发

                全局前置路由守卫

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

                                to 表示本次要跳转的目标路由对象

                                from 表示当前从哪一个目标跳转的路由对象

                                next 是一个函数 表示跳转的意思  不执行next不往下继续跳转

                                next方法可以传入一个字符串表示导航到指定的路由页面  

                                        传入的是路由的path

                        })

                全局路由后置守卫(了解)

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

                                to和from和上面一样

                                这个里面没有next 因为都跳转完了

                        })

        2.路由单独守卫

                在routes数组里面找到单独的route对象 添加beforeEnter函数

                beforeEnter(to,from,next){ }

                当前路由的独立前置守卫 只针对其他路由跳转到当前路由时触发

                不执行next  就无法跳转到这个页面

        3.组件内路由守卫

                在vue文件里面定义三个钩子函数 主要针对路由的

                        beforeRouteEnter(){ 组件内路由前置守卫

                                在其他页面向当前组件对应的页面跳转时   如果不执行next不让跳转

                        }

                        beforeRouteLeave(){ 组件内路由后置守卫

                                如果不执行next 那么当前组件内点击跳转到其他路由会失败 不让跳出去 

                        }

                        beforeRouteUpdate(){ 组件内子路由守卫

                                 如果不执行next 则表示当前路由的子路由发生跳转时不让跳转

                                 也就是子路由不允许切换

                        }

                        以上三个函数参数都是to,from,next

03 动态路由的使用

        所谓动态路由就是路由的path里面可以定义变量

        将来跳转的时候变量部分的路径可以是动态的

        表示可以匹配更多的路径 进行跳转

        routes:[{

                path:'/本身的路径/:变量名',

                name:'路由的名字',

                component: 路由的组件对象

        }]

        跳转时匹配的path:

                push('本身的路径/随便写的内容')

        在目标页面通过

                this.$route.params.path 配置冒号后面的变量 获取 动态路由传递过来的数据