<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>