2019/08/12
- 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跳转到的网页‘后退’按钮不能点击。
- 两个图片的叠加
<div style="position: relative">
<div style="position: absolute;">
<img v-show="wechat" src="0.png" alt="">
</div>
<img" src="1.png" @click="changeMethod(0)">
</div>
<div style="position: relative;">
<div style="position: absolute;">
<img v-show="alipay" src="3.png">
</div>
<img src="4.png" @click="changeMethod(1)">
</div>
示例
