<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>|
      <!-- router-link to属性是填写页面跳转path -->
      <router-link to="/mypage">MyPage</router-link>｜
      <!-- 实现路由重定向 -->
      <router-link to="/backhome">返回首页</router-link>｜
      <router-link to="/mypage/childthree/王五/21">重定向子路由三</router-link
      >｜
      <!-- 别名 -->
      <router-link to="/my">我的页面</router-link>
      <button @click="goPage">编程式导航</button>
      <router-link to="/testcomp">组件测试</router-link>|
    
      <router-link to="/lovecoding">lovecoding</router-link>|
      <router-link to="/addcomp">累加器</router-link>
    </nav>
    <!-- router-view 用来展示切换页面的地方 -->
    <div class="content">
      <transition name="fade">
        <router-view />
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    goPage() {
      // $router.push 用来实现页面跳转 参数部分使用的是 router-link to属性的参数
      // this.$router.push("/about");
      // $router.go 用来实现页面前进后退 参数为正数表示前进 负数后退
      this.$router.go(-1);
    },
  },
};
</script>
<style>
.content{
  position: relative;
  width: 100vw;
}
.fade-enter {
  transform: translateX(100%);
}
.fade-enter-active {
  transition: all 0.5s;
  position: absolute;
  top: 0;
  width: 100vw;
}
.fade-enter-to {
  transform: translateX(0);
}
.fade-leave {
  transform: translateX(0);
}
.fade-leave-active {
  transition: all 0.5s;
  position: absolute;
  top: 0;
  width: 100vw;
}
.fade-leave-to {
  transform: translateX(-100%);
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100vw;
  position: relative;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>