W250913/10_vuecli/helloworld/src/App.vue

<template>
  <div id="app">
    <div class="container">
      <nav>
        <!-- router-link 就是路由链接 -->
        <!--  to 属性 就是路由链接的路径 -->
        <router-link to="/">
          <div class="nav-item">首页</div>
        </router-link>
        <router-link to="/about">
          <div class="nav-item">关于</div>
        </router-link>
        <router-link :to="{name:'pageone',params:{a:10,b:20}}">
          <div class="nav-item">页面一</div>
        </router-link>
         <router-link to="/pagetw">
          <div class="nav-item">页面二</div>
        </router-link>
        <!-- <router-link to="/pagethree"> -->
        <router-link :to="{name:'pagethree',query:{x:123,y:456}}">
          <div class="nav-item">页面三</div>
        </router-link>
        <router-link to="/home">
          <div class="nav-item">返回首页</div>
        </router-link>
        <router-link to="/backhome">
          <div class="nav-item">首页别名</div>
        </router-link>

        <div class="nav-item" @click="goPage">
          编程式导航
        </div>
        <router-link to="/pagefour">
          <div class="nav-item">页面四</div>
        </router-link>
        <router-link to="/pagefive">
          <div class="nav-item">页面五</div>
        </router-link>
      </nav>
      <!-- router-view 就是路由出口 -->
       <div class="content" >
        <!-- 路由过渡效果 name 属性 就是路由过渡效果的名称 -->
        <transition name="fade">
          <router-view />
        </transition>
       </div>
    </div>

  </div>
</template>
<script>
  
export default{
    name:"App",
    methods:{
        goPage(){
          // 编程式导航  push 类似于 router-link to 属性
          // this.$router.push("/pagetwo");
          // this.$router.push({name:'pagethree',query:{x:999,y:666}})
          // go 方法 类似于浏览器的前进后退 里面的数字式步数 负数后退 正数前进
          // this.$router.go(-1);
        }
    }
}
</script>
<style>
/* 路由过渡效果 */
.fade-enter{
  opacity: 0;
}
.fade-enter-active{
  transition: all 1s ease-in-out;
}
.fade-enter-to{
  opacity: 1;
}
.fade-leave{
  opacity: 1;
}
.fade-leave-active{
  transition: all 0.5s ease-in-out;
  opacity: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

}
.container{
  display: flex;
}
nav {
  padding: 30px;
  width: 200px;
}
.content{
  flex-grow: 1;
}
.nav-item {
  width: 100px;
  height: 50px;
  background-color: #ddd;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  color: #111;
  margin-bottom: 10px;
}

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