路由之编程导航

<template>
  <div class="home">
    <button @click="handleClick('back')">返回上一页</button>
    <button @click="handleClick('push')">跳转到parent</button>
    <button @click="handleClick('replace')">替换到parent</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  methods:{
    handleClick(type){
      if (type==="back") {
        //this.$router.back();
        this.$router.go(-1);
      }else if (type==="push") {
        const name="caoqi";
        //使用push会在浏览器中加入一个记录
        //使用路径跳转
        //this.$router.push("/parent");
        //还可以使用命名路由的方式：
        this.$router.push({
          // name: "parent",
          // //加入name参数,http://localhost:8080/#/parent?name=caoqi
          // query: {
          //   name: 'caoqi'
          // }

          // name: "argu",
          // //加入name参数,http://localhost:8080/#/argu/caoqi
          // params: {
          //   name: 'caoqi'
          // }


          //ES6写法：
          path:`/argu/${name}`,
        })
      }else if (type==="replace") {
        //使用replace不会在浏览历史中加入记录
        this.$router.replace({
          name: 'parent'
        })
      }
    }
  }
}
</script>