前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue移动端框架Mint UI教程-跳转新页面(四)

Vue移动端框架Mint UI教程-跳转新页面(四)

作者头像
王小婷
发布2019-05-10 10:28:35
1.9K0
发布2019-05-10 10:28:35
举报
文章被收录于专栏:编程微刊编程微刊编程微刊

前三节写了vue的移动端框架的入门篇章,今天接着写,今天写的教程其实很简单,在之前的基础上,新建一个界面,并且进行跳转新页面。



Vue移动端框架Mint UI教程-搭建环境引入框架(一)

https://cloud.tencent.com/developer/article/1406082

Vue移动端框架Mint UI教程-底部导航栏(二)

https://cloud.tencent.com/developer/article/1415738

Vue移动端框架Mint UI教程-组件的使用(三)

https://cloud.tencent.com/developer/article/1416218

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:点击测试:可以看到实现的效果。


原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.04.25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档