Vue移動端框架Mint UI教程-跳轉新頁面(四)

前三節寫了vue的移動端框架的入門篇章，今天接着寫，今天寫的教程其實很簡單，在以前的基礎上，新建一個界面，而且進行跳轉新頁面。

---

• 官網：https://mint-ui.github.io/#!/zh-cn
• Github: https://github.com/ElemeFE/mint-ui/

---

Vue移動端框架Mint UI教程-搭建環境引入框架（一）
https://www.jianshu.com/p/874e5152b3c5

Vue移動端框架Mint UI教程-底部導航欄（二）
https://www.jianshu.com/p/56e887cbb660

Vue移動端框架Mint UI教程-組件的使用（三）
https://www.jianshu.com/p/5ec1e2d2f652

1：首先，在pages底下新建一個新的頁面fa.vue

 

 

在頁面裏面寫一些代碼

<template>
  <div id="index">
    我是新頁面
  </div>
</template>
<style scoped>
  #index{
    display: flex;
    justify-content: center;
    margin-top: 100px;
  }
</style>
<script>
  export default{}
</script>

2：打開index.js文件
將這個新的界面配置到router文件夾下的index.js中去：

import Fa from '../pages/fa.vue'
{
      path: '/fa', component: Fa
  }

3：在當前的頁面裏面寫跳轉方法

<li><mt-button size="large" @click="go">測試跳轉</mt-button></li>

methods: {
go() {
this.$router.push('/fa');//要跳轉的界面
},}

 

4：點擊測試：能夠看到實現的效果。

 

---

原文做者：祈澈姑娘 
90後前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。
堅持總結工做中遇到的技術問題，堅持記錄工做中所所思所見，對於博客上面有不會的問題，歡迎加入編程微刊qq羣：260352626