Mint UI跳转新页面

最新推荐文章于 2024-05-29 15:11:55 发布

转载最新推荐文章于 2024-05-29 15:11:55 发布 · 617 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/weixin_44763569/article/details/90408847

vue入门学习记录专栏收录该内容

26 篇文章

订阅专栏

Mint UI跳转新页面

本文链接： https://blog.csdn.net/weixin_44763569/article/details/90408847

展开

前三节写了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
  }
![在这里插入图片描述](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="{&quot;mod&quot;:&quot;1585297308_001&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/weixin_44763569/article/details/90408847&quot;,&quot;extend1&quot;:&quot;pc&quot;,&quot;ab&quot;:&quot;new&quot;}"><div></div></div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                                <div data-report-view="{&quot;mod&quot;:&quot;popu_387&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/weixin_44763569/article/details/90408847&quot;,&quot;extend1&quot;:&quot;pc&quot;,&quot;ab&quot;:&quot;new&quot;}"></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="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}" 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="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}">关注</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>