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

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

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

相关文章
|
7天前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
35 2
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
56 3
|
6天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
21 4
|
8天前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
2月前
|
JavaScript
vue3移动端自适应方案
【8月更文挑战第14天】
155 7
|
2月前
|
JavaScript
如何在Vue页面中引入img下的图片作为背景图。../的使用
这篇文章介绍了在Vue页面中如何引入`img`目录下的图片作为背景图,提供了两种使用相对路径的方法。第一种是使用`../assets/img/`作为路径引入图片,第二种是使用`../../assets/img/`作为路径。文章还展示了使用这些方法的代码实现和效果展示,并鼓励读者学无止境。
如何在Vue页面中引入img下的图片作为背景图。../的使用
|
2月前
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
本文介绍了如何在Vue3项目中配置开启Gzip压缩以减小打包文件体积,并在移动端调试时集成vConsole插件,同时使用webpack-bundle-analyzer插件进行打包分析。
186 0
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
|
2月前
|
JavaScript 前端开发 开发者
Vue3 系列教程 — 为什么选择 Vue 框架? (开篇)
Vue3 系列教程 — 为什么选择 Vue 框架? (开篇)
|
2月前
|
JavaScript Docker 容器
【Azure 应用服务】在Azure上部署一套VUE框架的单页面应用,有什么可以参考的文档呢?
【Azure 应用服务】在Azure上部署一套VUE框架的单页面应用,有什么可以参考的文档呢?
|
2月前
|
存储 JavaScript 前端开发
响应式的 switchboard:让又大又慢的Vue/AIpine 页面爆快
响应式的 switchboard:让又大又慢的Vue/AIpine 页面爆快

相关实验场景

更多