Mint UI跳轉新頁面
前三節寫了vue的移動端框架的入門篇章,今天接着寫,今天寫的教程其實很簡單,在之前的基礎上,新建一個界面,並且進行跳轉新頁面。
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 } ![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20200512170215828.png)
3:在當前的頁面裏面寫跳轉方法
<li><mt-button size="large" @click="go">測試跳轉</mt-button></li>
methods: {
go() {
this.$router.push(’/fa’);//要跳轉的界面
},}
![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20200512170258353.png)
4:點擊測試:可以看到實現的效果。
####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
Vue移動端框架Mint UI教程-跳轉新頁面(四)
https://www.jianshu.com/p/364d0462ddb6
Vue移動端框架Mint UI教程-調用模擬json數據(五)
https://www.jianshu.com/p/6d3f1436b327
Vue移動端框架Mint UI教程-數據渲染到頁面(六)
https://www.jianshu.com/p/dc532ab82d2a
Vue移動端框架Mint UI教程-接口跨域問題(七)
https://www.jianshu.com/p/b28cd8290b2a
原文作者:祈澈姑娘
關注「編程微刊」公衆號 ,在微信後臺回覆「領取資源」,獲取IT資源300G乾貨大全。
</div><div data-report-view="{"mod":"1585297308_001","dest":"https://blog.csdn.net/weixin_44763569/article/details/90408847","extend1":"pc","ab":"new"}"><div></div></div>
<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
<div data-report-view="{"mod":"popu_387","dest":"https://blog.csdn.net/weixin_44763569/article/details/90408847","extend1":"pc","ab":"new"}"></div>
<div class="person-messagebox">
<div class="left-message"><a href="https://blog.csdn.net/weixin_44763569">
<img src="https://profile.csdnimg.cn/3/C/2/3_weixin_44763569" class="avatar_pic" username="weixin_44763569">
</a></div>
<div class="middle-message">
<div class="title"><span class="tit "><a href="https://blog.csdn.net/weixin_44763569" data-report-click="{"mod":"popu_379","ab":"new"}" target="_blank">王很皮</a></span>
<!-- 等級,level -->
<img class="identity-icon" src="https://csdnimg.cn/identity/blog5.png"> </div>
<div class="text"><span>原創文章 219</span><span>獲贊 53</span><span>訪問量 14萬+</span></div>
</div>
<div class="right-message">
<a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379","ab":"new"}">關注</a>
<a href="https://im.csdn.net/im/main.html?userName=weixin_44763569" target="_blank" class="btn btn-sm bt-button personal-letter">私信
</a>
</div>
</div>
</div>
</article>