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


5640239-d9be015f8d214667.png

在页面里面写一些代码





2:打开index.js文件
将这个新的界面配置到router文件夹下的index.js中去:

import Fa from '../pages/fa.vue'
{
      path: '/fa', component: Fa
  }
5640239-8e6b08302c8e166d.png

3:在当前的页面里面写跳转方法

  • 测试跳转
  • methods: { go() { this.$router.push('/fa');//要跳转的界面 },}
    5640239-5f0331fa1b3261e7.png

    4:点击测试:可以看到实现的效果。


    5640239-4fde1f70dce9db43.gif

    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


    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,欢迎加入编程微刊qq群:260352626

    你可能感兴趣的:(Vue移动端框架Mint UI教程-跳转新页面(四))