浅谈对路由的理解

什么是路由?

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

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

前端路由:主要用于单页面的开发,前端路由用户请求的路径发生改变的时候不经过后端,所以不会刷新,不跳转。

    原理:通过onhashchange或者history.js进行页面的切换。

    前端路由主要用来做页面的渲染。

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

路由跳转的方式:

  1、a标签进行跳转

  2、router-link进行跳转

  3、编程式路由----this.$router.push()

路由传值的方式:

  1、动态路由传值。例如:path:"/home/:id/name";  接受的时候通过 this.$route.params

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

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

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

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

  路由配置参数:

    path:跳转路径

    component:路径相对于的组件

    name:命名路由

    meta:路由元信息

    children:子路由的配置参数(路由嵌套)

    props:路由解耦

    redirect:重定向路由

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

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

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

  后退:this.$router.back()

  前进:this.$router.forward()

如何重定向路由?

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

如何实现路由解耦?

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

猜你喜欢

转载自www.cnblogs.com/wuqilang/p/11257509.html