路由router的学习

vue-router详解及实例
$router、$route、$router.push()和、$router.replace()

一、this.$router

this.$router是VueRouter的一个对象，表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此方法获取到路由器对象，并调用其push(), go()等方法

二、this.$route

this.$route表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等方法

路由跳转方法push、replace、go、back

push()

本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录

• push() 传递参数params和query和接收参数

字符串
this.$router.push(name)
this.$router.push(path)
 
对象
传参:name搭配params （类似post）
this.$router.push({
        name:'xxx',
        params:{
          id:id
        }
      })
  
接收参数:
this.$route.params.id

传参: path搭配query （类似get）
this.$router.push({
        path:'/xxx',
        query:{
          id:id
        }
      })
  
接收参数:
this.$route.query.id

replace()

就不可以通过浏览器的<按钮回到上一页
替换路由，没有历史记录，点击返回，会跳转到上一个页面

this.$router.go(n)

相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

this.$router.back();

返回上一页