什么是路由?
根据不同的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进行接受