uniapp-跳转和创建vue文件

本文介绍了如何在UniApp中创建文件,包括通过右键操作和手动添加pages.json路径。重点讲解了Vue组件间的跳转方法,如uni.navigateBack()、uni.navigateTo(),以及如何接收并处理从上一页面传递的参数。

uniapp文件和样式和vue一样,但是没有路由,跳转方法和小程序一样
一、创建文件
1.鼠标右键,如果新建页面的话,会新建一个文件,文件里面会有一个vue文件,这种方法会在pages.json文件里自动创建路径
2.鼠标右键新建,然后选择新建vue页面的话,会在右键的文件下创建一个页面,但是pages.json里面的路径需要自己添加
在这里插入图片描述
二、跳转

methods: {
			goback() {
			//返回上一页的方法
				uni.navigateBack()			
				},
			// 在C页面内 navigateBack,将返回A页面
			goback2() {
				uni.navigateBack({
    				delta: 2
			});
			},
			gochat() {
			//跳转
				uni.navigateTo({
					url: './chat?id=1'
				})
			}
		},

2.接收页面

onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
        console.log(option.id); 
//打印出上个页面传递的参数。传递的是id=1,则获取到的就是option.id
    }

ps:传递json


var mynavData = JSON.stringify(that.navData); // 这里转换成 字符串
                uni.navigateTo({
                    url:'./nav?index='+mynavData
                })
onLoad(options) {
            var data = JSON.parse(options.index); // 字符串转对象
            console.log(data)
        }

参考:https://blog.youkuaiyun.com/happy81997/article/details/108262668

UniApp 中使用 `uniapp-router-next` 插件可以实现更灵活的路由管理,其配置方式与 Vue Router 类似,但针对 UniApp 的运行环境进行了适配。以下是详细的配置方法: ### 1. 安装插件 首先,需要通过 npm 或 yarn 安装 `uniapp-router-next` 插件: ```bash npm install uniapp-router-next --save ``` 或 ```bash yarn add uniapp-router-next ``` ### 2. 创建路由配置文件 在项目根目录下创建一个 `router` 文件夹,并在其中创建一个 `index.js` 文件。在该文件中定义路由规则,例如: ```javascript import { createRouter, createWebHistory } from 'uniapp-router-next' const routes = [ { path: '/', name: 'Home', component: () => import('../pages/Home/Home.vue' }, { path: '/about', name: 'About', component: () => import('../pages/About/About.vue' } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` ### 3. 在 `main.js` 中引入路由 在项目的 `main.js` 文件中引入并使用路由: ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false const app = new Vue({ router, render: h => h(App) }) app.$mount() ``` ### 4. 使用路由 在页面中可以通过 `router-link` 组件进行导航,也可以通过编程式导航实现页面跳转: ```vue <template> <view> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> </view> </template> ``` 或 ```javascript this.$router.push('/about') ``` ### 5. 路由守卫 `uniapp-router-next` 支持全局前置守卫、全局后置钩子等,类似于 Vue Router 的功能。例如,可以在路由配置中添加守卫: ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth) { // 检查用户是否已登录 if (store.getters.isLoggedIn) { next() } else { next('/login') } } else { next() } }) ``` ### 6. 动态路由 `uniapp-router-next` 还支持动态添加路由,例如: ```javascript router.addRoute({ path: '/dynamic', name: 'Dynamic', component: () => import('../pages/Dynamic/Dynamic.vue' }) ``` ### 7. 路由元信息 可以通过 `meta` 字段为路由添加元信息,用于控制页面标题、权限等: ```javascript { path: '/about', name: 'About', component: () => import('../pages/About/About.vue'), meta: { title: '关于页面', requiresAuth: true } } ``` ### 8. 页面刷新与数据重新加载 在断网或需要重新加载数据的情况下,可以通过跳转到一个空页面再返回的方式来实现数据刷新。例如,在 `refresh.vue` 页面中使用 `beforeRouteEnter` 钩子: ```javascript beforeRouteEnter(to, from, next) { next(vm => { vm.$router.push(from.path) }) } ``` ### 9. 页面缓存 类似于 Vue 的 `keep-alive` 功能,可以通过路由的 `meta` 字段控制页面是否缓存: ```javascript { path: '/cache', name: 'Cache', component: () => import('../pages/Cache/Cache.vue'), meta: { keepAlive: true } } ``` 在页面组件中通过 `v-if` 判断是否缓存: ```vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> ``` ### 相关问题 1. 如何在 `uniapp-router-next` 中实现路由懒加载? 2. `uniapp-router-next` 是否支持嵌套路由? 3. 如何在 `uniapp-router-next` 中实现页面过渡动画? 4. `uniapp-router-next` 是否支持 H5、小程序等多端兼容? 5. 如何在 `uniapp-router-next` 中处理 404 页面?
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值