vue - 页面跳转

HTML：a

小程序：navigator

Vue：router-link

1. router-link => a标签

2. javascript标签跳转页面

　　2.1

　  2.2

3. 常用方法之跳上一页/下一页

　3.1

3.2

 <template>
   <div id="app">
     <img src="./assets/logo.png">
     <router-view/>
     <router-link to="/">[跳转到主页]</router-link>
     <router-link to="/login">[登录]</router-link>
     <router-link to="/logout">[登出]</router-link>

     <!-- javascript跳转页面 -->
     <button @click="goHome">[跳转到主页]</button>

     <!-- 回到上一页 -->
     <button @click="upPage">[上一页]</button>
     <button @click="downPage">[下一页]</button>

     <!-- 回到下一页 -->

   </div>
 </template>

 <script>
 export default {
   name: "App",
   methods: {
     // 跳转页面方法
     goHome() {
       this.$router.push("/");
     },
     upPage() {
       //  后退一步记录，等同于 history.back()
       this.$router.go(-1);
     },
     downPage() {
       // 在浏览器记录中前进一步，等同于 history.forward()
       this.$router.go(1);
     }
   }
 };
 </script>

 <style lang='scss' type='text/css'>
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #f00;
   margin-top: 60px;
   img {
     // width: 200px;
     height: 100px;
   }
 }
 </style>