2019-08-012 $router 和 route

2019/08/12

1. $router 和 route

• router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象。
• route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等。

$router.push({path:'home'});   //本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录

$router.replace({path:'home'});  //替换路由，没有历史记录

this.$router.push({path:`/user/${userId}`})   //路由跳转
this.$route.params.userId   //接收参数

this.$router.push({name:'Login',params:{id:'leelei'}})
this.$router.push({path:'/login',query:{id:'leelei'})
this.$route.query.***   //query传参是针对path的，params传参是针对name的

注意
1.使用query传参的话，会在浏览器的url栏看到传的参数类似于get请求，使用params传参的话则不会，类似于post请求。
2.如果提供了path，params将会被忽略（即如果要使用params传参，则一定要使用name），但是query不属于这种情况。如果使用完整路径和query传参，刷新页面时不会造成路由传参的参数丢失。
3.router.push和router.replace的区别是：replace不会向 history 添加新记录，而是替换掉当前的 history 记录，即使用replace跳转到的网页‘后退’按钮不能点击。

2. 两个图片的叠加

示例