vue路由$router之回退和跳转

vue的$route是指路由组件，$router是路由器主要是方法。

1.this.$router.push()

描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。

2.this.$router.replace()

描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

3.this.$router.go(n)

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

<template>
<div>
  <ul>
    <li v-for="(obj,index) in msgarr" :key="obj.id">
      <router-link :to="`/home/message/detail?id=${obj.id}`">{{obj.msg}}</router-link><!--es6传参方式${}同时需要用`来包裹-->
      <button @click="pushr(obj.id)">push</button>
      <button @click="replacer(obj.id)">replace</button>
    </li>
  </ul>
  <button @click="$router.back()">回退back</button>
  <button @click="$router.go(-1)">回退go</button>
  <button @click="$router.go(1)">前进</button>
  <div>

    <router-view></router-view>
  </div>
</div>
</template>

<script>
    export default {
        name: "Message",
      data(){
          return {
            msgarr:[{
              id:1,
              msg:'11111111111',
              desc:'desc11111111111'
            },{
              id:2,
              msg:'2222222222',
              desc:'desc22222222222222'
            }],
          }
      },
      methods:{
        pushr(id){
          this.$router.push(`/home/message/detail?id=${id}`)
        },replacer(id){
          this.$router.replace('/home/message/detail?id='+id)
        }
      }
    }
</script>

<style scoped>

</style>