<template>
  <div>
    <div>我们的页面是：</div>
    
    <router-link class="to" to="/?id=1">首页</router-link>
    <router-link class="to" to="/detail?=2">详情页</router-link>
    <router-link class="to" to="/list?id=3">列表</router-link>


     <router-link class="to" to="/detail?id=2" replace>replace</router-link>

    <router-link to="/?id=1&name=hhhen ">首页</router-link>
    <router-link to="/detail?=2&age=22">详情页</router-link>
    <router-link to="/list?id=3&weight=33">列表</router-link> 
   
   <!-- 写成对象的形式 -->
   <router-link :to="{name:'home',query:{title:'Home',id:1}}">首页</router-link>
   <router-link :to="{name:'detail',query:{title:'Detail',id:2}}">详情页</router-link>
   <router-link :to="{name:'list',query:{title:'List',id:3}}">列表</router-link> 

    <!-- 第一种方式 to填写路由的path路径 -->
    <router-link class="menu" to="/">首页</router-link>
    <router-link to="/detail">详情页</router-link>
    <router-link to="/list">列表</router-link> 

    <!-- 第二种方式 to填写路由的path路径 -->
    <router-link :to="{path:'/'}">首页</router-link>
    <router-link :to="{path:'/detail'}">详情页</router-link>
    <router-link :to="{path:'/list'}">列表</router-link>

    <!-- 第三种方式 to填写路由的path路径 -->
    <router-link :to="{name:'home'}">首页</router-link>
    <router-link :to="{name:'detail'}">详情页</router-link>
    <router-link :to="{name:'lists'}">列表</router-link> 
    
    <br/>

    <!-- 第四种方式 通过js跳转 path-->
    <button @click="pathTo('/')">home</button>
    <button @click="pathTo('/detail')">detail</button>
    <button @click="pathTo('/list')">list</button> 
    <!-- <button @click="back">返回</button>
    <button @click="replaceDetail">替换到Detail</button>

        <br/>
    <button @click="pathToHome">home</button> 
    <button @click="pathToDetail">detail</button> 
    <button @click="pathToList">list</button>  -->

    <!-- 第五种方式 通过js跳转 path-->
    <button @click="nameTo('home')">home</button>
    <button @click="nameTo('detail')">detail</button>
    <button @click="nameTo('list')">list</button>

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

<script>
export default {
  created(){
    console.log(this.$router)
  },
  methods:{
    // 通过path跳转
    // this.$router 是一个对象来的
    // push 是 this.$router 对象里面的一个方法
    // 或者字符串，如果你传递字符串的话，就是这么写
    // 前往首页
    // pathToHome(){
    //   this.$router.push('/'){
    //       path:'/'
    //     })
    // },
    
    // // 第一种方式
    // pathTo(path) {
    //   this.$router.push({
    //     path: path
    //   })
    // },
    // 通过name跳转
    // nameTo(name) {
    //   this.$router.push({
    //     name: name
    //   })
    // },

    // 第二种方式
    //this. route获取当前路由信息
    pathToHome(id){
      //  console.log(1)
      //  console.log(this.$route)
      //  if (this.$route.path == '/')
      //  {
      //     return;
      //  }
      if(this.$route.name==='home') return false
      this.$router.push({
        name:'home',
        query:{
          id:'1',
          age:'18'
        }
      })
    },
    pathToDetail(){
      //  console.log(2)
       if (this.$route.name == 'detail') return false
        this.$router.push({
        name:'detail',
        query:{
          id:'2'
        }
      })
    },
    pathToList(){
      if (this.$route.name == 'list') return false
      // console.log(3)
        this.$router.push({
        name:'list',
        query:{
          id:'3'
        }
      })
    },
    replaceDetail(){
      if(this.$route.name==='detail') return false
      this.$router.replace({
        path:'/detail'
      })
    },
    back (){
      this.$router.back()
    }
  }
}
</script>

<style scoped>
button{
  margin:5px;
}
.to{
  margin:10px;
}
</style>