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

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

---

• 官网：https://mint-ui.github.io/#!/zh-cn
• Github: https://github.com/ElemeFE/mint-ui/

---

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

在页面里面写一些代码

代码语言：javascript复制

<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中去：

代码语言：javascript复制

import Fa from '../pages/fa.vue'
{
      path: '/fa', component: Fa
  }

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

代码语言：javascript复制

<li><mt-button size="large" @click="go">测试跳转</mt-button></li>

methods: {
go() {
this.$router.push('/fa');//要跳转的界面
},}

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

---

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

https 网络安全 javascript mintui github

0 人点赞