（0218）Vue路由详解/路由底层原理

向梦寒
1,651 阅读3分钟

路由

  • 根据用户请求的路径来展示不同的页面或者返回不同的数据。
  • 路由分类
    • 前端路由:根据用户请求不同的url来展示不同的页面或者数据，前端路由是不会涉及到后端请求的，以及页面不会进行刷新的。用户体验比较好，一般用来做单页面开发的(SPA)。
      • 前端路由的底层原理：hashchange 和H5的history API中的popState和replaceState来进行实现的
    • 后端路由:根据用户请求的路径来返回不同的数据或者页面，后端路由一般情况下都是用来做接口的，通过ajax请求的路径来返回相对应的数据

Vue中的路由

  • 需要进行安装
    cnpm install vue-router -S
  • 创建router文件夹
  • 在router文件夹中创建index.js文件 引入Vue和 vue-router进行配置使用。
  • 面试题
    • Vue中使用插件的流程
    import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

Vue中路由常用的配置项

  • mode:路由的一种形式，默认是hash 另外一个值是history
  • routes:数组 数组中有N多个对象，每一个对象都是一个路由的配置项
    • path:匹配路由的路径
    • component:路由路径匹配成功以后会显示相对应的组件
    • redirect:路由重定向
    • name:命名路由

Vue路由的内置组件

  • 当我们将VueRouter挂在到vm实例身上时就会多出2个内置组件
  • router-view 渲染路由匹配的组件
  • router-link 路由的跳转
    • 底层原理还是用a标签进行实现的，它属于内置组件,自身会有一个to属性,这个属性代表的是跳转的地址。
    • tag:指定router-link渲染成哪一个标签。
  • 当router-view在app.vue中编写的时候一般情况下这些页面都是一级路由。

Vue中路由跳转的方式有哪些？

  • <a></a>
  • routerlink
  • 编程式导航

路由传值

  • 不同的页面直接需要相互传递数据来进行数据的请求或者进行数据的渲染，因此需要路由传值。
  • 动态路由传值
    • 在定义路由的时候在path路由处通过/:属性的方式来定义传递参数的属性
    • 在路由跳转的时候在路径跳转的地方通过/值得方式来进行传值
    • 在需要接收参数的页面通过this.$route.params的方式来进行接收
  • query传值：所谓的query传值其实就是通过url地址进行拼接将数据传递给另一个路由
    • 在路由跳转的时候通过 路径?key=value&key=value的方式将数据进行传值
    • 在需要接收参数的页面通过this.$route.query的方式进行接收
  • 路由解耦：路由解耦只适用于动态路由
    • 在定义路由的时候在path路由处通过/:属性的方式来定义传递参数的属性
    • 在定义路由的时候添加一个props属性为true
    • 在路由跳转的时候在路径跳转的地方通过/值得方式来进行传值
    • 在需要接收参数的页面通过props来进行接收即可
  • 编程式导航传值：所谓的编程式导航也就是通过JS的方式进行路由的跳转。
    • this.$router.push("/detail/"+name+'/'+price)
    • this.$router.push
    • this.$router.go
    • this.$router.back
    • this.$router.forward
    • this.$router.replace
    • 这里go的前进后退方法能否执行取决于浏览器中是否有浏览历史记录
  • 动态路由和query传值之间的区别？
    • 动态路由传值 值是必须传递的
    • query传值 值是非必须

路由嵌套

/a
/a/b
/a/c
/a/b/v
avatar
文章
阅读
粉丝