HTML：a
小程序：navigator
Vue：router-link
1. router-link => a標簽
2. javascript標簽跳轉頁面
2.1
2.2
3. 常用方法之跳上一頁/下一頁
3.1
3.2
1 <template>
2 <div id="app">
3 <img src="./assets/logo.png">
4 <router-view/>
5 <router-link to="/">[跳轉到主頁]</router-link>
6 <router-link to="/login">[登錄]</router-link>
7 <router-link to="/logout">[登出]</router-link>
8
9 <!-- javascript跳轉頁面 -->
10 <button @click="goHome">[跳轉到主頁]</button>
11
12 <!-- 回到上一頁 -->
13 <button @click="upPage">[上一頁]</button>
14 <button @click="downPage">[下一頁]</button>
15
16 <!-- 回到下一頁 -->
17
18 </div>
19 </template>
20
21 <script>
22 export default { 23 name: "App", 24 methods: { 25 // 跳轉頁面方法
26 goHome() { 27 this.$router.push("/"); 28 }, 29 upPage() { 30 // 后退一步記錄，等同於 history.back()
31 this.$router.go(-1); 32 }, 33 downPage() { 34 // 在瀏覽器記錄中前進一步，等同於 history.forward()
35 this.$router.go(1); 36 } 37 } 38 }; 39 </script>
40
41 <style lang='scss' type='text/css'>
42 #app {
43 font-family: "Avenir", Helvetica, Arial, sans-serif;
44 -webkit-font-smoothing: antialiased;
45 -moz-osx-font-smoothing: grayscale;
46 text-align: center;
47 color: #f00;
48 margin-top: 60px;
49 img { 50 // width: 200px;
51 height: 100px;
52 }
53 } 54 </style>