浅谈对路由的理解

什么是路由？

　　根据不同的url展示不同的页面或者数据。

分类：路由分为前端路由和后端路由。

前端路由：主要用于单页面的开发，根据用户请求的地址来渲染不同的页面。前端路由不会经过后端，而是根据hash值的变化进行页面数据的渲染，所以不会刷新，不跳转。

　　原理：通过hashRouter（onhashchange）或者history路由（h5 historyAPI）进行页面的切换。

后端路由：根据用户请求的路径返回不同的页面或数据。

 

routes：

　　它是路由配置的一些规则，是一个数组，数组中的每一个对象都是一个路由的配置项。

export const router=new VueRouter({
    routes:[{},{},{}]     
})

 

 

和：

　　当路由配置成功后，VueRouter会提供2个内置组件用来做组件的显示：

　　　　：路由组件展示

　　　　：路由的跳转----to表示跳转到哪里去，tag表示是什么标签

 

路由跳转的方式：

　　1、a标签进行跳转----首页

　　2、router-link进行跳转----首页

　　　　　　当路由配置成功后，VueRouter会提供2个内置组件来做组件的显示：----路由组件展示    ----路由的跳转（to表示到达的地方，tag表示渲染成什么标签）

　　3、编程式路由----this.$router.back()----this.$router.push()----这两个最终要

　　　　　　在created函数中this是VueComponent对象，这些方法都是原型中的方法

　　　　　　this.$router.back()　　后退

　　　　　　this.$router.forward()　　前进---一般不用

　　　　　　this.$router.push()　　跳转

　　　　　　this.$router.go()　　指定跳转---1表示前景，-1表示后退，0表示刷新

　　　　　　this.$router.replace()　　替换

 

路由传值的方式：

　　1、动态路由传值

　　　　例如：path:"/home/:id/name";  接受的时候通过 this.$route.params

　　　　①定义路由时，通过/:属性/:属性来定义传递的属性

　　　　②路由跳转时，通过/值/值将数据传到对应的组件中

　　　　③在对应的组件内部通过this.$route.params进行数据的接收

　　2、query传值。因为在url中？后面的参数不会被解析，因此我们可以通过query进行传值。接收的时候通过 this.$route.query

　　3、路由解耦。在配置路由的时候添加props属性为true,在需要接受参数的组件页面通过props进行接受

　　4、编程式导航  this.$router.push({path:"/home",query:{}});

 

动态路由传值和query传值的区别：（是否需要传递参数）

　　动态路由中path:"/detail/:id/:name"----前端路由跳转时必须要传递参数，如果没有参数，那么对应的页面不会显示。

　　query中path:"/detail"----query传值时不需要写参数。

 

路由配置项常用的属性及作用：

　　路由配置参数：

　　　　mode：hash----默认，地址栏中有#号，不需要后端配置，建议使用；history----地址栏中没有#号，需要后端配置。

　　　　path：跳转路径

　　　　component：路径相对于的组件

　　　　name：命名路由----在path:"/home"后面加一个name:"home"，用于动态路由传值时以对象的形式传值

　　　　meta：路由元信息

　　　　children：子路由的配置参数（路由嵌套）

　　　　props：路由解耦----在配置项中增加props:true

　　　　redirect：重定向路由

 

编程式导航使用的方法以及常用的方法：

　　路由跳转：this.$router.push()

　　路由替换：this.$router.replace()

　　后退：this.$router.back()

　　前进：this.$router.forward()

　　指定跳转：this.$router.go()

 

如何重定向路由？

　　配置路由中的redirect进行重定向

 

如何实现路由解耦？

　　在路由的配置项中设置props:true，在需要接受组件的内部通过props进行接受

 

$router和$toute的区别：

　　$route：当前路由的信息，fullPath、hash、matched、meta、params、path、query

　　$router：路由的实例对象，具有一些需要的方法，如编程式导航的跳转

 

路由守卫：

　　路由钩子函数，路由跳转前的一些验证。

　　全局守卫：beforeEach----实例VueRouter的方法，在index.js中用router调用。（局部守卫在各个页面中写在export default{ }中）

    router.beforeEach((to,from,next)=>{
        document.title=to.meta.title;
        if(to.path!="/login" && to.meta.auth){
            if(sessionStorage.getItem("token")){
                next();
            }else{
                next("/login");
            }
        }else{
            next();
        }
    });

 

　　局部守卫：

　　　　beforeRouteEnter：进入路由前的守卫，当前路由的钩子函数中访问不到this。

　　　　场景：登录验证、热力图、权限校验、消息通知

 

    beforeRouteEnter(to,from,next){
        //这里无法获取this
        //to---去哪里   from---从哪里来    next()---跳转
        next("/login");
        next((vw)=>{//vw---VueComponent对象

        });
    }

 

　　　　beforeRouteUpdate：路由更新时的守卫，当路由发生改变时，而当前组件没有经历创建和销毁时就需要用到beforeRouteUpdate。

 

    //当点击orderdetail页面的水果切换时，地址栏更新而页面不更新，解决：
    beforeRouteUpdate(to,from,next){
        this.id=to.params.id;
        this.name=to.params.name;
        next();
    }

 

　　　　除此之外，watch监听$route的变化也能达到同样的效果。

    watch: {
        "$route"(to,from){
            this.id=to.params.id;
            this.name=to.params.name;
        }   
    }

 

　　　　beforeRouteLeave：路由离开时的守卫

　　　　场景：未支付、未保存、答题系统、退出登录

 

    beforeRouteLeave(to,from,next){
        let flag=confirm("确定要离开吗？");
        if(flag) next();
    }

 

 

 

路由懒加载：

　　1、异步组件的方式

　　2、ES6的import的方式

　　　　

 

转载于:https://www.cnblogs.com/wuqilang/p/11257509.html