浅谈对路由的理解

什么是路由?

  根据不同的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

你可能感兴趣的:(浅谈对路由的理解)