专栏首页编程微刊Vue移动端框架Mint UI教程-跳转新页面(四)

Vue移动端框架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
  }

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后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Jquery前端分页插件pagination同步加载和异步加载

    王小婷
  • 从零开始学习React-在react项目里面使用mock(七)

    从零开始学习React-开发环境的搭建(一) https://www.jianshu.com/p/97f3a1ba168e 从零开始学习React-目录结构...

    王小婷
  • 最简单的混合开发教程资料汇总

    王小婷
  • pandas速查表

    统计特征:https://zhuanlan.zhihu.com/p/82394380

    MachineLP
  • Android 7.0 中 ContentProvider 实现原理

    本文描述了 ContentProvider 发布者和调用者这两在 Framework 层是如何实现的。

    汪毅雄
  • Android 7.0中ContentProvider实现原理

    | 导语 本文描述了ContentProvider发布者和调用者这两在Framework层是如何实现的。 作为Android的四大组件之一,ContentPro...

    腾讯Bugly
  • 基于声音的鸟类物种检测

    拥有Python经验的女性数据科学家,博士候选人,鸟类学家,数据分析师和软件工程师共同参与了一系列为期两周的冲刺,共同致力于该项目。

    代码医生工作室
  • 【Rust日报】2020-04-16 MongoDB 官方 Rust Driver

    来自 MongoDB 官方支持的 MongoDB Rust 驱动程序,该客户端库可用于与 Rust 应用程序中的 MongoDB 部署进行交互。同时 BSON ...

    MikeLoveRust
  • 一步步完成jsRender + Spring MVC + Nginx前后端分离示例

    本篇博文的目标是使用前端页面渲染插件jsRender做前后端分离,后端采用Spring MVC给出REST API,并结合Nginx完成配置。

    孟君
  • YARN之label调度在EMR中的应用

    在腾讯云EMR的用户场景使用当中,有部分用户要求希望他们能在任务高峰期,对集群进行扩容,利用云端的弹性计算资源,为集群扩展计算能力,并且在集群相对空闲的情况下,...

    shangwen_

扫码关注云+社区

领取腾讯云代金券